/* ============================================================
   embudo.css — Embudo de leads (`#/embudo`). Vista: js/views/embudo.js.
   ------------------------------------------------------------
   Contrato visual: docs/design/direcciones/embudo-a.html (desktop) +
   embudo-a-mobile.html (mobile). La tanda "tarjeta operable"
   (2026-08-30) no tiene mockup propio — extiende el layout existente
   siguiendo la jerarquía descripta en el header de embudo.js.
   Reusa SIN TOCAR las clases globales del kanban de Preventa
   (pipeline.css — NO scoped a `.view-pipeline`): .kanban-wrap/
   .kanban-track/.kanban-col/.col-hd/.col-hd-top/.col-dot/.col-name/
   .col-meta/.col-count/.col-body/.kcard/.kcard-name/.col-empty-bg/
   .col-empty*. Acá solo lo que falta.
   ⚠️ `.rail-card` YA EXISTE en app.css (rail de la Ficha 360, otra
   semántica) — por eso el interior de los rieles terminales usa el
   prefijo `ev-` (`.ev-rail-*`) en vez del nombre literal del mockup.
   ⚠️ Deuda pagada en esta tanda (2026-08-30): `.kcard-comercial`/
   `.kcard-meta`/`.kcard-contact` vivían acá GLOBALES (sin scope,
   aunque solo las usaba esta vista) — colisión latente con el
   prefijo compartido de Preventa. La restructuración de la tarjeta
   de esta misma tanda ya no necesita esas 3 líneas sueltas: la
   ciudad y el "último contacto" se fusionaron en `.ev-card-resp` y
   `.ev-clocks`, y el nombre del comercial pasó a vivir en el chip
   editable `.ev-chip-ctrl` — así que en vez de un rename mecánico
   1 a 1 (que hubiera dejado 3 reglas sin ningún consumidor), se
   consolidaron en las clases nuevas de más abajo. El único rename
   mecánico puro de esta tanda es el ghost del drag (`.kcard-ghost*`
   → `.ev-ghost*`, ver esa sección: sigue viviendo en `document.body`
   por diseño, así que no se puede scopear bajo `.view-embudo`).
   ============================================================ */

/* ---- Filtro por comercial: mismo criterio que .view-pipeline .seg
   (pipeline.css) — scroll horizontal propio si hay muchos nombres. ---- */
.view-embudo .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.view-embudo .seg::-webkit-scrollbar { display: none; }
.view-embudo .seg button { white-space: nowrap; }

/* ---- N3/N4 (2026-09-07) — buscador + selector de orden. `.filters-block`/`.filter-row`/
   `input[type=search]`/`select`/`.clientes-count`/`.link-btn` son GLOBALES (app.css, ya usadas
   por problemas.js con el mismo patrón: buscador full-width arriba, selects en `.filter-row`
   debajo) — acá solo lo que falta: la fila "N de M · Limpiar búsqueda". ---- */
.view-embudo .ev-search-info { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* ============================================================
   KPI — franja de contexto (§4.1 #1: ningún número solo)
   ============================================================ */
.view-embudo .ev-ctx { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ev-kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: 2px;
  min-width: 150px; flex: 1 1 150px;
}
.ev-kpi-v { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ev-kpi-v.blue { color: var(--blue-text); }
.ev-kpi-v.orange { color: var(--orange-text); }
.ev-kpi-v.green { color: var(--green-text); }
.ev-kpi-l { font-size: var(--fs-chip); color: var(--text-3); font-weight: 500; line-height: 1.35; }

/* Cobertura del BCRA (§4.1 #7/#8): sin esta línea, un tablero lleno de chips grises parece un
   bug de la tarjeta cuando en realidad es un dato que todavía no se terminó de ingerir. */
.view-embudo .ev-bcra-cov-line { font-size: var(--fs-chip); color: var(--text-3); line-height: 1.4; padding: 2px 2px 0; }

/* ============================================================
   Contenido de tarjeta [1]-[7] — compartido por `.kcard` (desktop),
   `.mcard` (mobile) y `.ev-av-card` (columnas de avance): un dato,
   un lugar (§4.1 #6). Todo scoped bajo `.view-embudo`.
   ============================================================ */
/* [1] nombre + chip BCRA — fila común a kcard y a la tarjeta liviana de avance. `.kcard-name`
   (global, pipeline.css) se REUSA tal cual dentro de esta fila: es pura tipografía, no una
   definición nueva de `.kcard*` (el test de contrato solo prohíbe DEFINIR selectores `.kcard*`
   fuera de `.view-embudo`, no usar la clase existente en un elemento). */
/* ⚠️ `flex-wrap: wrap` (2026-09-08, reporte de Fernando con captura): con DOS chips que no encogen
   ("BCRA 1 · cheques" + "ARCA: incumplimientos") y el nombre en `min-width: 0`, el nombre quedaba
   aplastado a UNA LETRA POR RENGLÓN ("R/a/m/i/r/o…"). Los chips bajan a la línea siguiente cuando no
   entran; el nombre nunca cede por debajo de su mínimo legible (`flex-basis` 120px). */
.view-embudo .ev-card-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.view-embudo .ev-card-top .kcard-name { flex: 1 1 120px; min-width: 0; }
.view-embudo .ev-bcra-chip { flex-shrink: 0; }
/* Chip «Nunca entró a la web»: `.chip.yellow` (tokens ya medidos AA en los dos temas, ver
   `portalNuncaIngresoChipNode`). Nunca se corta: nowrap viene de `.chip`; el tope es solo red. */
.view-embudo .ev-portal-chip { flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* [2] razón social — solo aparece cuando difiere del nombre de fantasía (UI.displayNameTitle) */
.view-embudo .ev-card-rs { font-size: 11px; color: var(--text-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* [3] responsable · ciudad — fusiona lo que antes eran `.kcard-comercial`(nombre)+`.kcard-meta`
   (ciudad) en una sola línea, porque `UI.mejorTelefono(t).nombre` YA es "el responsable", no "el
   comercial asignado" (eso ahora vive en el chip [4], editable). */
.view-embudo .ev-card-resp { font-size: 11px; color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-embudo .ev-card-resp.missing { color: var(--orange-text); font-style: italic; }

/* Comercial en SOLO LECTURA — tarjetas livianas (columnas de avance y celular). Pedido de
   Fernando 2026-09-08. NO es `.ev-chip-ctrl`: ese es el chip editable de la tarjeta pesada, y
   parecerse a un control que no se puede tocar es peor que no estar (un control que miente).
   Por eso hereda el peso visual de `.ev-card-resp` —la otra persona de la fila— y no el del chip.
   `min-width: 0` en el `span` para que el ellipsis funcione dentro del flex (la lección del
   2026-08-30: un ítem flex trae `min-width: auto` y su mínimo real es el min-content). */
.view-embudo .ev-card-comercial { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-3); margin-top: 3px; }
.view-embudo .ev-card-comercial span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-embudo .ev-card-comercial svg { flex: 0 0 auto; opacity: .65; }
.view-embudo .ev-card-comercial.missing { color: var(--orange-text); font-style: italic; }

/* [5] relojes — sin-contacto y en-etapa, siempre juntos */
.view-embudo .ev-clocks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.view-embudo .ev-clock { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-3); }
.view-embudo .ev-clock .ico { flex-shrink: 0; }

/* [7] acciones de contacto (WA/Tel/Mail/IG) — `.ev-contact-btn` es AUTOSUFICIENTE (no depende de
   que `.contact-act`, la clase base del componente compartido, ya tenga estilos propios en
   app.css — evita un acoplamiento de orden de carga entre agentes trabajando en paralelo). */
.view-embudo .ev-contact-row { display: flex; gap: 6px; margin-top: 6px; }
.view-embudo .ev-contact-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--gray-soft); color: var(--text-2); border: 1px solid var(--border);
  text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.view-embudo .ev-contact-btn:hover { background: var(--surface-3); }
.view-embudo .ev-contact-btn.is-disabled { color: var(--text-4); opacity: .55; }

.badge-prospecto {
  display: inline-flex; align-items: center; margin-top: 5px;
  font-size: 10px; font-weight: 700; color: var(--blue-text); background: var(--blue-soft);
  border: 1px solid var(--blue-border); border-radius: var(--r-pill); padding: 2px 6px; line-height: 1.3;
}
.anomaly {
  display: flex; align-items: center; gap: 4px; border-radius: 6px; padding: 3px 7px;
  font-size: 10.5px; font-weight: 700; line-height: 1.3; margin-top: 5px; border: 1px solid;
}
.anomaly .ico { flex-shrink: 0; }
.anomaly.odoo-missing { background: var(--orange-soft); border-color: var(--orange-border); color: var(--orange-text); }
.anomaly.already-alta { background: var(--green-soft); border-color: var(--green-border); color: var(--green-text); }
/* Nuevos en esta tanda: `data-conflict` (avance) y `stalled`/`no-contact` (relojes vencidos).
   Rojo = urgente/dato roto, naranja = atención — mismo código de color que el resto de la app
   (ej. Cobranzas "Crítico" en rojo). */
.anomaly.data-conflict { background: var(--red-soft); border-color: var(--red-border); color: var(--red-text); }
.anomaly.stalled { background: var(--orange-soft); border-color: var(--orange-border); color: var(--orange-text); }
.anomaly.no-contact { background: var(--red-soft); border-color: var(--red-border); color: var(--red-text); }

/* ============================================================
   Drag & drop (desktop) — estados sobre las clases globales de
   pipeline.css (que no definen ninguno de estos tres).
   ============================================================ */
.view-embudo .kcard { cursor: grab; }
.view-embudo .kcard.is-dragging {
  opacity: .35; outline: 2px dashed var(--border-strong); outline-offset: -2px;
  background: var(--surface-2); cursor: grabbing;
}
.view-embudo .kanban-col.drop-target .col-hd,
.view-embudo .kanban-col.drop-target .col-body { background: var(--blue-soft); border-color: var(--blue); }
/* Cuenta con alta en Odoo arrastrada hacia una etapa ANTERIOR: destino bloqueado (mismo rojo que
   `[data-avance].drop-blocked`), no invita a soltar. El rechazo explícito con toast está en `finishDrag`. */
.view-embudo .kanban-col.drop-blocked { cursor: not-allowed; }
.view-embudo .kanban-col.drop-blocked .col-hd,
.view-embudo .kanban-col.drop-blocked .col-body { background: var(--red-soft); border-color: var(--red-border); }
.view-embudo .kanban-rail.drop-blocked { cursor: not-allowed; }
.view-embudo .kanban-rail.drop-blocked .ev-rail-card { background: var(--red-soft); border-color: var(--red-border); }

/* Ghost del drag — vive en `document.body` (position:fixed, necesita escapar de cualquier
   `overflow` recortado de una columna), FUERA de `.view-embudo`: no se puede scopear bajo la
   vista. Antes se llamaba `.kcard-ghost` y colisionaba con el prefijo global de Preventa —
   renombrado mecánicamente sin cambiar de lugar (embudo.js:buildGhost). */
.ev-ghost {
  position: fixed; top: 0; left: 0; width: 210px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 10px 12px; box-shadow: var(--sh-3); transform: rotate(1.5deg);
  z-index: var(--z-toast); pointer-events: none; opacity: .95;
}
.ev-ghost-name { font-size: 13px; font-weight: 700; color: var(--text-1); display: block; }
.ev-ghost-comercial { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.ev-ghost-comercial.missing { color: var(--orange-text); font-style: italic; }

/* Separador visual: columnas de trabajo / rieles terminales / columnas de avance (se reusa el
   mismo separador dos veces — antes del primer riel terminal y antes de la primera columna de
   avance — con un `title` distinto en cada uso). */
.kanban-sep { flex: 0 0 1px; background: var(--hairline); align-self: stretch; margin: 16px 4px; }

/* ============================================================
   Rieles terminales — colapsados a 68px; `.is-expanded` los hace
   crecer in-place al ancho de una columna normal.
   ============================================================ */
.view-embudo .kanban-rail {
  flex: 0 0 68px; display: flex; flex-direction: column;
  max-height: calc(100vh - 260px); /* mismo offset base que .kanban-col en pipeline.css */
  cursor: pointer;
}
.view-embudo .kanban-rail.is-expanded { flex: 0 0 236px; cursor: default; }
.view-embudo .kanban-rail.drop-ready .ev-rail-card { background: var(--blue-soft); border-color: var(--blue); }

.ev-rail-card {
  flex: 1; min-height: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) 4px; overflow: hidden;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.view-embudo .kanban-rail.is-expanded .ev-rail-card { display: none; }
.ev-rail-card:hover { background: var(--surface-2); border-color: var(--border-strong); }

.ev-rail-accent { width: 100%; height: 3px; border-radius: var(--r-pill); flex-shrink: 0; }
.kanban-rail.ev-rail-green .ev-rail-accent { background: var(--green); }
.kanban-rail.ev-rail-green-cond .ev-rail-accent { background: var(--green); opacity: .5; }
.kanban-rail.ev-rail-red .ev-rail-accent { background: var(--red); }
.kanban-rail.ev-rail-gray .ev-rail-accent { background: var(--text-4); }

.ev-rail-count { font-size: 16px; font-weight: 800; letter-spacing: -.02em; flex-shrink: 0; }
.kanban-rail.ev-rail-green .ev-rail-count, .kanban-rail.ev-rail-green-cond .ev-rail-count { color: var(--green-text); }
.kanban-rail.ev-rail-red .ev-rail-count { color: var(--red-text); }
.kanban-rail.ev-rail-gray .ev-rail-count { color: var(--text-3); }

.ev-rail-name {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  flex: 1; min-height: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; max-height: 150px;
}
.ev-rail-expand { font-size: 9px; font-weight: 600; color: var(--text-4); letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0; }

.ev-rail-week {
  display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0;
  background: var(--green-soft); border: 1px solid var(--green-border); border-radius: 6px; padding: 3px 4px;
}
.ev-rail-week-v { font-size: 12px; font-weight: 800; color: var(--green-text); }
.ev-rail-week-l { font-size: 8px; font-weight: 700; color: var(--green-text); letter-spacing: .03em; text-align: center; line-height: 1.15; }

/* Panel expandido — visualmente equivalente a un `.kanban-col`, pero es descendiente de
   `.kanban-rail` (no una columna nueva): reusa `.col-body` para las tarjetas y le saca el borde
   propio (el borde ya lo pone `.ev-rail-expanded`, no hace falta duplicarlo). */
.ev-rail-expanded {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.ev-rail-exp-hd {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 10px 12px; border-bottom: .5px solid var(--hairline); flex-shrink: 0;
}
.ev-rail-exp-title { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.ev-rail-collapse {
  width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--gray-soft);
  color: var(--text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.ev-rail-collapse:hover { background: var(--surface-3); }
.ev-rail-expanded .col-body { flex: 1; min-height: 0; border: none; border-radius: 0; }
.ev-rail-empty { padding: var(--sp-4); text-align: center; font-size: var(--fs-sm); color: var(--text-3); }

/* ============================================================
   Columnas de avance (2026-08-30) — última milla del funil, a la
   derecha de los rieles terminales. NO son `.kanban-col`: no
   llevan `data-estadio` (candado 1 contra el drop, ver hitTest en
   embudo.js) y usan `data-avance` en su lugar. Visualmente
   equivalentes a una columna de trabajo (mismo ancho, mismo
   patrón de header/body) pero con nombres propios: no son un
   drop target y no deben confundirse con uno.
   ============================================================ */
.view-embudo .ev-av-col {
  flex: 0 0 236px; display: flex; flex-direction: column;
  max-height: calc(100vh - 260px);
}

/* ⚠️ Columnas PAREJAS — reporte de Fernando en producción: "hay algunas columnas que son mas
   anchas que otras, esa asimetria no parece tener sentido". Tenía razón y la causa no era el
   ancho declarado: las tres clases piden `flex: 0 0 236px`, pero un ítem flex trae
   `min-width: auto`, o sea que su mínimo real es el MIN-CONTENT de lo que tiene adentro. Un texto
   largo sin espacios donde cortar empuja la columna entera.
   Medido antes del fix (viewport 1440): 236 · 236 · 256 · 236 · 302 · 236 y las de avance en 310
   y 363 — el ancho lo estaba decidiendo "Amaya Roberto Nicolas · Chajarí", no el diseño.
   `min-width: 0` devuelve el control al `flex-basis`: las 9 quedan en 236.
   Va SCOPEADO al embudo y NO en pipeline.css: Preventa se midió y está sana (sus 5 columnas
   rinden su ancho declarado, la de 256 lo declara a propósito), así que el defecto es del
   contenido nuevo de esta vista, no de la definición compartida.
   ⚠️ Su otra mitad vive en el JS: al dejar de estirarse, 32 líneas pasan a cortarse — y por eso
   `.ev-card-resp`/`.ev-card-rs` llevan `title` SIEMPRE (§4.1 #12). Los dos cambios son uno solo:
   aplicar este sin aquel deja textos perdidos en vez de abreviados.
   Los RIELES entran en la misma regla: colapsados miden 68px por diseño, pero al expandirlos
   volvían a estirarse por su contenido (medido: 468 · 236 · 266 en la misma pantalla). */
.view-embudo .kanban-col,
.view-embudo .ev-av-col,
.view-embudo .kanban-rail { min-width: 0; }
.view-embudo .ev-av-hd {
  padding: 10px 12px; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface-2); border: 1px solid var(--border); border-bottom: none;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  cursor: help; /* la explicación del avance se lee en el title/aria-label */
}
.view-embudo .ev-av-name {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.view-embudo .ev-av-count { font-size: 12px; font-weight: 700; color: var(--text-3); flex-shrink: 0; }
.view-embudo .ev-av-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;
}
.view-embudo .ev-av-empty { padding: 16px 12px; text-align: center; font-size: 11.5px; color: var(--text-4); background: var(--surface); }
.view-embudo .ev-av-card { background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
/* Las dos fuentes de "el dato no cierra" — texto chico, no compite con el nombre */
.view-embudo .ev-av-evidence { font-size: 10.5px; color: var(--text-3); line-height: 1.4; margin-top: 2px; }
/* Alta en Odoo hace ≥60 días sin pedido: ámbar de TEXTO (`--yellow-text`, ya medido AA en los dos
   temas para `.chip.yellow`), nunca rojo — el rojo de la tarjeta es de la mora (§4.1 nº4). */
.ev-av-evidence-warn { color: var(--yellow-text); }
/* Días desde el alta en Odoo (2026-09-08, "que sean más visibles los días"): número grande y en
   negrita, etiqueta chica al lado; ámbar (`--yellow-text`, AA en los dos temas) desde 60 días. */
.view-embudo .ev-alta-dias { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; color: var(--text-2); }
.view-embudo .ev-alta-dias-n { font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--text-1); font-variant-numeric: tabular-nums; }
.view-embudo .ev-alta-dias-l { font-size: 11px; color: var(--text-3); }
.view-embudo .ev-alta-dias-warn .ev-alta-dias-n, .view-embudo .ev-alta-dias-warn .ev-alta-dias-l { color: var(--yellow-text); }
.view-embudo .ev-av-link { position: relative; display: inline-block; font-size: 11px; font-weight: 600; color: var(--blue-text); text-decoration: none; margin-top: 4px; padding: 2px 0; }
/* T5e (2026-09-06): chip "Ya existe" + botón "Unificar" — reemplaza el CTA de alta cuando hay
   una coincidencia con `odoo_partner_id` (contrato §2.4/§3). El chip trunca con ellipsis (el
   nombre de la otra cuenta puede ser largo, §4.1 nº12) en vez de partirse en dos renglones; el
   `title` completo va en el propio `UI.el`. */
.view-embudo .ev-ya-existe { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.view-embudo .ev-ya-existe .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Candado 2 del drag: rechazo visual explícito al soltar sobre una columna de avance. */
.view-embudo [data-avance].drop-blocked { cursor: not-allowed; }
.view-embudo [data-avance].drop-blocked .ev-av-hd { background: var(--red-soft); border-color: var(--red-border); }

/* ============================================================
   Feed mobile — secciones colapsables (m-only)
   ============================================================ */
.ev-sec { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.ev-sec-hd {
  width: 100%; border: none; background: none; font: inherit; color: inherit;
  display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 52px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: left;
}
.ev-sec-hd:active { background: var(--surface-2); }
.ev-sec-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ev-sec-dot.gray { background: var(--text-4); }
.ev-sec-dot.blue { background: var(--blue); }
.ev-sec-dot.orange { background: var(--orange); }
.ev-sec-dot.green { background: var(--green); }
.ev-sec-dot.red { background: var(--red); }
.ev-sec-label { font-size: 15px; font-weight: 700; flex: 1; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-sec-count { font-size: 13px; font-weight: 600; color: var(--text-3); flex-shrink: 0; }
.ev-sec .chev { transition: transform var(--t-fast) var(--ease); flex-shrink: 0; }
.ev-sec.is-open .chev { transform: rotate(90deg); }
.ev-sec-body { border-top: .5px solid var(--hairline); display: flex; flex-direction: column; }
.ev-sec-empty { padding: var(--sp-3) 14px; font-size: var(--fs-sm); color: var(--text-3); }

.mcard {
  display: flex; flex-direction: column; gap: 5px; padding: 12px 14px;
  border-bottom: .5px solid var(--hairline); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background var(--t-fast) var(--ease);
  min-height: 44px;
}
.mcard:last-child { border-bottom: none; }
.mcard:active { background: var(--surface-2); }
/* ⚠️ `flex-wrap: wrap` + `flex-basis` (2026-09-08, reporte de Fernando con captura del celular): con
   dos chips que no encogen ("BCRA 1 · cheques" + "ARCA: incumplimientos") y `overflow-wrap: anywhere`,
   el nombre quedaba a UNA LETRA POR RENGLÓN ("R/a/m/i/r/o…"). Ahora el nombre exige 140 px y los chips
   bajan a la línea siguiente cuando no entran. `overflow-wrap: anywhere` se conserva solo para
   handles sin espacios más largos que la tarjeta. */
.mcard-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mcard-name { font-size: 14.5px; font-weight: 700; color: var(--text-1); flex: 1 1 140px; line-height: 1.3; overflow-wrap: anywhere; }
.mcard-move-hint { flex-shrink: 0; color: var(--text-3); display: flex; }

/* ============================================================
   Sheet "Mover a…" (mobile) — reusa `.sheet`/`.sheet-backdrop`/
   `.sheet-hd`/`.sheet-body` globales (app.css); acá solo la lista.
   Bare (sin `.view-embudo`) por el mismo motivo que `.ev-ghost`: el
   sheet se appendea a `document.body`, fuera de la vista.
   ============================================================ */
.ev-mv-list { display: flex; flex-direction: column; padding: 4px 0; }
.ev-mv-row {
  display: flex; align-items: center; gap: 10px; padding: 0 4px; min-height: 48px;
  border-radius: var(--r-sm); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ev-mv-row:hover, .ev-mv-row:focus-visible { background: var(--surface-2); }
.ev-mv-row.is-current { opacity: .5; cursor: default; }
.ev-mv-row.is-current:hover { background: none; }
/* Etapa anterior de una cuenta con alta en Odoo: deshabilitada (no oculta). La pista visible es
   `.ev-mv-note`, arriba de la lista; texto en --text-2 (AA en los dos temas). */
.ev-mv-row.is-blocked { opacity: .5; cursor: not-allowed; }
.ev-mv-row.is-blocked:hover { background: none; }
.ev-mv-note { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.4; margin: 0 4px 6px; }
.ev-mv-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ev-mv-dot.gray { background: var(--text-4); }
.ev-mv-dot.blue { background: var(--blue); }
.ev-mv-dot.orange { background: var(--orange); }
.ev-mv-dot.green { background: var(--green); }
.ev-mv-dot.red { background: var(--red); }
.ev-mv-name { font-size: 15px; font-weight: 600; flex: 1; }
.ev-mv-count { font-size: 13px; color: var(--text-3); font-weight: 500; }
.ev-mv-sep { height: .5px; background: var(--hairline); margin: 4px 4px; }

/* ============================================================
   Línea de exclusión por Tipo (franja KPI) — §4.1 #7
   ============================================================ */
.ev-excl-line {
  font-size: var(--fs-chip); color: var(--text-3); line-height: 1.4;
  padding: 2px 2px 0;
}

/* ============================================================
   Chips editables [4] (desktop, dentro de `.kcard`) — Clasificación
   / Tipo / Vendedor, los 3 con la MISMA fábrica (`buildFieldChip`,
   embudo.js) y por lo tanto el MISMO CSS (antes esto era
   `.ev-tipo-*`, exclusivo de Tipo; generalizado en esta tanda).
   Menú INLINE (no popover: ver comentario largo en embudo.js).
   Cada chip gatea su propia visibilidad server-side
   (puede_cambiar_tipo/clasificacion/comercial).
   ============================================================ */
.view-embudo .ev-chip-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 6px; }
.view-embudo .ev-chip-ctrl { position: relative; }
.view-embudo .ev-chip-btn {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-size: 10px; font-weight: 600; color: var(--text-3);
  background: var(--gray-soft); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 2px 7px; line-height: 1.3; cursor: pointer;
}
.view-embudo .ev-chip-btn:hover { background: var(--surface-3); }
.view-embudo .ev-chip-ctrl.is-open .ev-chip-btn { background: var(--blue-soft); color: var(--blue-text); border-color: var(--blue-border); }
.view-embudo .ev-chip-menu {
  margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--sh-1); overflow: hidden; min-width: 140px;
}
.view-embudo .ev-chip-opt {
  position: relative; padding: 6px 9px; font-size: 11.5px; font-weight: 600; color: var(--text-1);
  cursor: pointer; border-bottom: .5px solid var(--hairline);
}
.view-embudo .ev-chip-opt:last-child { border-bottom: none; }
.view-embudo .ev-chip-opt:hover, .view-embudo .ev-chip-opt:focus-visible { background: var(--surface-2); }
.view-embudo .ev-chip-opt.is-current { color: var(--text-3); font-weight: 500; cursor: default; background: var(--gray-soft); }
.view-embudo .ev-chip-opt.is-current:hover { background: var(--gray-soft); }

/* Blancos táctiles ≥44px en `@media (pointer: coarse)` por PSEUDO-ELEMENTO `::after` con `inset`
   negativo, NUNCA por padding (agrandar la caja real descoloca filas/rompe la densidad de los
   menús). Precedente exacto: static/css/app.css:170-176 (`.seg button::after`). Cubre TODOS los
   controles chicos nuevos de esta tanda con una sola regla — §4.1 #6 aplicado al CSS. */
@media (pointer: coarse) {
  .view-embudo .ev-chip-btn::after,
  .view-embudo .ev-chip-opt::after,
  .view-embudo .ev-av-link::after {
    content: ""; position: absolute; inset: -9px -4px;
  }

  /* ⚠️ Los botones de contacto son la EXCEPCIÓN a la regla del pseudo-elemento, y la excepción
     está medida (2026-08-30, sobre el teléfono a 375px): la caja real es 26×26 con gaps de 6px,
     así que `inset: -9px -4px` daba 44px de ALTO pero solo 34 de ANCHO. Y estirar el pseudo-
     elemento a -9px horizontal NO es la salida: cada lado invadiría 9px de un gap de 6px, o sea
     12px de SOLAPE entre áreas táctiles vecinas — el dedo cae en la zona compartida y se dispara
     el botón equivocado. Un blanco táctil que abre el WhatsApp del cliente de al lado es peor que
     uno chico: el chico se reintenta, el equivocado se manda.
     Acá SÍ se agranda la caja real porque la fila es propia y sobra lugar (4×44 + 3×6 = 194px en
     una fila de 315px): no descoloca ninguna otra fila, que es lo que la regla general evita. */
  .view-embudo .ev-contact-btn {
    min-width: 44px; min-height: 44px;
  }
}