/* ── BITÁCORA ──
   [v2026.10.28-1] 2026-10-28 | EMBUDOS EN EL CELULAR (Alberto, 28-10, con captura: «filtros de embudos no se ven bien»). Bajo
     640px: la barra de arriba ya no se sale por la derecha (el buscador, con el ojo y el lápiz, en su propia fila a todo
     el ancho; Importar, Filtros y los canales debajo). El panel «Filtros»: cada fila con su nombre arriba y los chips que
     bajan de línea en vez de cortarse; los de ACTIVIDAD sin partir su texto; el panel scrollea si no cabe en la pantalla.
   [v2026.10.27-1] 2026-10-27 | Con el «?» de la ayuda junto al título (embudos.html [v2026.10.27-1]), en pantallas de 768px o
     menos el título «Embudos» se esconde y quedan el ícono y el «?»: no cabían con las vistas y el tamaño (a 390px el
     título quedaba en «Em…»; a 768px ya quedaba en «…» desde antes).
   [v2026.10.25-1] 2026-10-25 | UN SOLO BOTÓN «FILTROS» (preview aprobado por Alberto el 25-10; embudos.js [v2026.10.25-1]): las
     filas ACTIVIDAD y CLIENTE del panel flotante (#emb-actbar, #emb-clibar) usan los chips de siempre (.emb-dia-chip);
     + .emb-vip-chip (con su regalo) y .emb-filtros-limpiar («Limpiar filtros», a la derecha de la última fila). Las
     etiquetas de las filas, del mismo ancho.
   [v2026.10.23-4] 2026-10-23 (4) | .emb-tip del ancho de su texto (width: max-content), con el ancho de antes como máximo: con un texto corto ya no queda
     una caja ancha con espacio vacío (Alberto, 23-10, con captura: «el globo debe adaptarse al mensaje»).
   [v2026.10.23-3] 2026-10-23 (3) | LA TARJETA ÚNICA EN EMBUDOS (embudos.js y embudos-estados.js [v2026.10.23-3]):
     .emb-card y .emb-est-card ahora nacen como .hv-card (hv-tarjeta.css) y toman de ahí fondo, borde, radio,
     sombra, hover y marcada; acá quedan solo los ajustes de Embudos sobre esa base (al final del archivo):
     sin margen doble en las listas (ya tienen gap), el botón de mover dentro de la derecha de la tarjeta,
     el arrastre y el placeholder. Las reglas viejas de .emb-card / .emb-est-card quedan para el placeholder
     y para lo que no sea hv-card.
   [v2026.10.23-2] 2026-10-23 (2) | LOS FILTROS FLOTAN como en Calendario (Alberto, 23-10): .emb-filtros-flot (el
     panel bajo #emb-cabecera, que pasa a position:relative) y las filas FILTRAR / chips adentro sin fondo
     propio. El título con el componente único (.hv-titulo de hv-tarjeta.css [v2026.10.23-2]): la barra
     pierde su aire vertical y .emb-topbar-title su letra Poppins. embudos.html [v2026.10.23-2].
     + La tarjeta MARCADA (.emb-card.selected y .emb-est-card.selected) con el look de la seleccionada del
     editor (fondo, borde y sombra de hv-tarjeta.css) en vez del anillo violeta grueso (Alberto, 23-10).
   [v2026.10.23-1] 2026-10-23 | EL ENCABEZADO COMO TARJETA (la opción B, aprobada por Alberto el 23-10
     sobre el demo real; hv-tarjeta.css [v2026.10.23-1]). La barra de arriba (título, vistas, tamaño,
     canales, buscador, lápiz, ojo y filtros) y las filas FILTRAR y ESTADOS/SERVICIOS van juntas en
     una tarjeta (#emb-cabecera, embudos.html [v2026.10.23-1]; embudos.js [v2026.10.23-1] mete ahí
     las dos filas), sobre el gris de las listas (.emb-wrap). Dentro de la tarjeta la barra y las
     filas pierden su fondo y sus rayas: la tarjeta ya los pone. SIN overflow:hidden en la tarjeta:
     los paneles del lápiz, del ojo y de los filtros se abren hacia abajo desde la barra y quedarían
     cortados.
   [v2026.10.21-6] 2026-10-21 (6) | La barra de confirmar, EN DOS LÍNEAS bajo 560 px: el
     aviso arriba y los botones debajo, a mitad y mitad y con alto de dedo. En una sola
     fila el texto y los dos botones se apretaban hasta quedar ilegibles en un teléfono
     (Alberto, 21-10). Es la barra que frena un movimiento de muchas personas a la vez: si
     no se lee, no frena nada.
   [v2026.10.21-5] 2026-10-21 (5) | El hueco que muestra dónde va a caer la tarjeta vale
     también para la vista por estado: .emb-est-card.drag-placeholder se suma a la regla
     que ya existía, con los mismos valores (embudos-estados.js [v2026.10.21-4]). Es el
     mismo objeto en la otra vista; duplicar la regla era pedir que se separaran.
   [v2026.10.21-4] 2026-10-21 (4) | El control de TAMAÑO se queda en todos los anchos
     (Alberto, 21-10: en una ventana angosta es cuando más falta hace poder acomodar el
     tablero a un porcentaje). Se va solo el NOMBRE de la vista bajo 768.
     Y el corte de la barra sube de 560 a 640: medido, con el control siempre puesto la
     barra entera necesita 594 px —antes 492—, así que entre 561 y 593 se desbordaba en
     vez de partirse. 640 deja 46 px de holgura y sigue lejos de los 768 de una tablet.
   [v2026.10.21-3] 2026-10-21 (3) | LA BARRA DE CHIPS, EL NOMBRE DE LA VISTA Y EL TAMAÑO
     (embudos.js [v2026.10.21-2], embudos-estados.js [v2026.10.21-3],
     embudos.html [v2026.10.21-2]).
     · .emb-est-svcbar → .emb-chipbar, .emb-est-et → .emb-chipbar-et y .emb-est-svc →
       .emb-chipf. El tablero la llena con ETAPAS y la vista por estado con SERVICIOS: es
       el mismo control mirando el otro eje, así que deja de llamarse «svc». Los valores no
       cambian; solo el nombre, para que nadie la copie creyendo que es de una sola vista.
     + .emb-vista-nom y .emb-vista-btn.on abierto: el botón puesto escribe su nombre.
     + .emb-zoom, .emb-zoom-btn y .emb-zoom-n, y el `zoom` en #emb-board, .emb-est-board y
       .emb-lista. Solo esos tres: la barra de arriba, los chips y el buscador quedan del
       tamaño de siempre, y la barra lateral y la nav del panel están fuera de .emb-wrap.
     + @media (max-width: 767px) que devuelve el botón a solo icono y esconde el control.
       MEDIDO: con los dos puestos la barra de arriba necesita 650 px para no partirse,
       contra los 492 de antes. Dejarlos en el teléfono habría obligado a partir la barra
       desde 720 px —y a partirla en tablets donde entra entera—. Escondidos, vuelve a
       caber desde 490 y el corte de 560 se queda donde se midió en su día.
   [v2026.10.21-2] 2026-10-21 (2) | LA COLUMNA PASA A SER UNA TARJETA DESPEGADA DEL FONDO,
     en las dos vistas (decisión de Alberto sobre tres previews; embudos.js [v2026.10.21-1],
     embudos-estados.js [v2026.10.21-2]).
     Antes eran franjas pegadas, separadas por una raya de 1 px y llegando hasta el borde.
     Ahora: aire de 8 px entre ellas y 10 px contra el borde, esquinas de 14, fondo gris
     debajo —sin ese gris no se despegan de nada— y la sombra de abajo.
     + :root con --emb-sep, --emb-fondo, --emb-radio, --emb-sombra, --emb-sombra-cinta,
     --emb-levante y --emb-sombra-alta. Los valores viven en UN solo lugar porque el
     tablero y la vista por estado tienen que verse iguales, y mientras estuvieran escritos
     dos veces uno se iba a corregir y el otro no: ya pasó con las esquinas de la cinta.
     LA SOMBRA ES DE ALBERTO (21-10, sobre el preview): su tercer valor va con Y NEGATIVA y
     vive en la COLUMNA, no en la cinta. Las sombras normales caen hacia abajo y dejaban el
     borde de ARRIBA sin separar del gris, que ahí son dos claros pegados. Puede ir en la
     columna aunque ésta recorte su contenido, porque overflow:hidden no recorta la sombra
     del propio elemento. El nivel es su «Firme», punto medio exacto entre los dos que yo
     había propuesto.
     LA CINTA pierde la raya de 3 px de arriba y el borde de abajo, y pasa a llevar el
     color en el relleno y en la letra (--tono-suave / --tono-texto / --tono-chip, que
     calcula embudos.js por contraste). Sin bordes, lo que la separa es su propia sombra.
     Los iconos de la cinta toman el color del texto pero apagados al 55 %: si fueran el
     color entero, «marcar todos» se vería igual puesto que sin poner, y ese botón vive de
     esa diferencia. El check pasa a bordearse con el color entero, que al 32 % sobre el
     relleno quedaba casi invisible.
     + .emb-est-card:hover y el levante de la columna en las dos vistas: la tarjeta sube
     1 px y la columna 2, desde cualquier parte de ella. La tarjeta de la vista por estado
     ya traía la transición escrita y no tenía nada que la disparara, así que la misma
     tarjeta se movía en una vista y en la otra no.
   [v2026.10.21-1] 2026-10-21 | + .emb-est-borrar (la papelera de cada fila del panel del
     lapiz) y .emb-btn-del (el boton rojo que confirma el borrado), para BORRAR UNA ETAPA
     (embudos-estados.js [v2026.10.21-1], embudos.html [v2026.10.21-1]). La papelera nace
     gris y recien al pasar por encima se pone roja: en una lista de seis o siete filas,
     seis papeleras rojas son un tablero que da miedo tocar. El rojo aparece donde la
     accion de verdad va a ocurrir, que es el boton del dialogo.
   [v2026.10.20-14] 2026-10-20 (14) | + .emb-est-msg (el avioncito de cada etapa, como
     .emb-col-msg del tablero) y .emb-est-fantasma (la copia que sigue al dedo al arrastrar en
     tactil, con los mismos valores que .emb-lis-fantasma de la vista lista: es el mismo gesto
     en otra vista). embudos-estados.js [v2026.10.20-8].
   [v2026.10.20-13] 2026-10-20 (13) | + .emb-est-col.col-drag-over: la columna de destino al
     reordenar etapas arrastrando la cinta (embudos-estados.js [v2026.10.20-7]). Mismos valores
     que .emb-col.col-drag-over del tablero, porque es el mismo gesto.
   [v2026.10.20-12] 2026-10-20 (12) | + .emb-etapa-ed, .emb-etapa-mia, .emb-etapa-alta y
     .emb-etapa-ok: administrar ETAPAS dentro del panel del lapiz (embudos-estados.js
     [v2026.10.20-6]). Reusa .emb-edit-row y sus hermanas —es la misma lista con otro
     contenido— y solo agrega lo propio: el campo de renombrar en la fila, la etiqueta de
     las que creo la empresa y el alta de abajo.
   [v2026.10.20-11] 2026-10-20 (11) | Vuelven .emb-est-svcbar y .emb-est-et, y se va .emb-est-svcs
     (embudos-estados.js [v2026.10.20-5], embudos.html [v2026.10.20-7]). En la -10 mandé los chips
     de servicio al panel de filtros leyendo mal el pedido: lo que Alberto queria era replegar las
     COLUMNAS, no sacar los chips. Eso se queda; los chips vuelven a su barra.
   [v2026.10.20-10] 2026-10-20 (10) | LAS COLUMNAS DE ESTADO SE REPLIEGAN (embudos-estados.js
     [v2026.10.20-4], embudos.html [v2026.10.20-6]).
     + .emb-est-check, .emb-est-col.apagada y .emb-est-vert: calcados de .emb-col-check,
       .emb-col.apagada y .emb-col-vert. Mismo ancho de franja (46 px) y mismo nombre en
       vertical, porque es el mismo gesto sobre otro eje.
     − .emb-est-svcbar y .emb-est-et: los servicios se van al panel de filtros (.emb-est-svcs),
       porque esta vista apilaba DOS barras donde el tablero tiene una.
   [v2026.10.20-9] 2026-10-20 (9) | DOS CALCOS QUE NO HICE BIEN, vistos por Alberto en
     produccion (embudos-estados.js [v2026.10.20-3]).
     − .emb-est-chk: el tilde de marcado era un CUADRITO dentro de la fila y en el tablero es
       un circulo en la esquina de la tarjeta (.emb-card-check). Es la misma accion en las dos
       vistas y tenia que verse igual; ademas, metido en la fila le robaba ancho al nombre.
       Ahora se reusa .emb-card-check tal cual, no una copia: una copia se separa sola.
     + las barras de desplazamiento de .emb-est-board, .emb-est-list y .emb-est-svcbar, con
       los mismos valores que .emb-board y .emb-col-list. Sin esas reglas el navegador pone
       las suyas, gordas y grises, y las dos vistas no se parecian.
   [v2026.10.20-8] 2026-10-20 (8) | LA VISTA POR ESTADO, FASES 2 Y 3 (embudos-estados.js
     [v2026.10.20-2], embudos.js [v2026.10.20-10], embudos.html [v2026.10.20-5]).
     · LAS COLUMNAS, IGUALES A LAS DEL TABLERO. Alberto lo vio desplegado: la cinta salia con
       las esquinas cuadradas y en la otra vista son redondeadas. Error de copia al escribir
       la vista nueva. Ahora .emb-est-col y .emb-est-head llevan el mismo ancho, fondo, radio
       y cinta que .emb-col/.emb-col-head, y .emb-est-card el mismo borde y sombra que
       .emb-card. Ademas el tinte pasa a llamarse --emb-tinte en las dos: con dos nombres
       para lo mismo, tarde o temprano se separan.
     + .emb-est-chk, .emb-est-card.selected, .emb-est-todos: marcar en esta vista, con los
       mismos gestos del tablero para no tener que aprenderla aparte.
     + .emb-est-card.pendiente y .emb-est-col.drag-over: arrastrar y el paso en suspenso.
       El sello .emb-pend-sello se reusa tal cual, no se duplica.
     + .emb-lote-etapa para el dialogo de cambiar de etapa a varios. La etapa que ninguno de
       los marcados puede tomar —su embudo no la tiene— se ve apagada, NUNCA escondida: si
       desapareciera, nadie entenderia por que falta.
   [v2026.10.20-7] 2026-10-20 (7) | LA TERCERA VISTA, FASE 1 (embudos-estados.js [v2026.10.20-1],
     embudos.js [v2026.10.20-9], embudos-lista.js [v2026.10.20-3], embudos.html [v2026.10.20-4]).
     + .emb-vistas y .emb-vista-btn: el conmutador de tres, junto al titulo. Reemplaza a
       .emb-btn-lista, que era de dos estados y colgaba al final de la barra derecha; esa regla
       se retira porque ya no la usa nadie.
     + .emb-estados y todo lo .emb-est-*: columnas por etapa, barra de servicios como filtro,
       tarjeta con sus chips y el aviso «+N en otro estado». Se muestra con .emb-modo-estados
       en el contenedor, igual que .emb-modo-lista: el display lo decide el CSS y nunca el JS
       en linea —escribirlo desde JS fue lo que rompio la vista lista en agosto—.
     + Bajo 560 px la barra superior se parte en DOS LINEAS en vez de apretar. Medido ancho
       por ancho: sin partir cabe de 492 px para arriba, y a 430 ya se desbordaba HOY sin
       conmutador. El corte va en 560 —y no en 768, como estaba al escribirlo— para no
       partir la barra en tablets donde entra entera.
   [v2026.10.20-6] 2026-10-20 (6) | UN SOLO ROSA PARA INSTAGRAM (embudos.js [v2026.10.20-8]).
     .emb-tag-canal-instagram pasa a #E1306C, el del resto del panel, y .emb-tag-canal-heavensy
     al azul de su logo. Esas etiquetas hoy no las pinta nadie —quedaron de una version anterior
     de la tarjeta— pero se dejan alineadas para que no vuelvan con el color viejo.
     .emb-canal-dot.instagram NO se toca: ese no es un rosa plano sino el degradado de marca.
   [v2026.10.20-5] 2026-10-20 (5) | TRES DETALLES DE LA CABECERA (embudos.js [v2026.10.20-7]).
     1. .emb-col-name deja de envolver: se corta con puntos suspensivos. Un nombre largo se
        iba a una segunda linea y ESA cabecera crecia, asi que las cintas quedaban de
        distinta altura. Lleva min-width:0 ademas de flex:1: sin eso un hijo flex no se
        encoge por debajo de su contenido y el text-overflow no llega a aplicarse nunca.
     2. .emb-canal-btn.on en tono suave —borde del color, relleno del MISMO color al 10%,
        icono en color—, la receta de .emb-filter-btn.active. El relleno solido se comia la
        barra, y ahora ademas el estado de partida son los CUATRO puestos.
     3. + .emb-canal-btn img y .emb-canal-dot img: el canal Heavensy se marca con su logo, y
        una imagen no se tine con `color` como los iconos tipograficos — apagada va en gris
        y medio transparente, puesta va entera. .emb-canal-dot.heavensy y
        .emb-lis-canal.heavensy pasan de violeta a blanco: el disco azul lo pone el logo.
   [v2026.10.20-4] 2026-10-20 (4) | MARCAR EN LA VISTA LISTA (embudos-lista.js [v2026.10.20-2]).
     + .emb-lis-chk (el cuadradito de cada fila, y el de cada etapa con .emb-lis-et-chk),
     .emb-lis-ct.selected, .emb-lis-barra y .emb-lis-todos (marcar todo el embudo).
     Y la barra de seleccion deja de empezar 176 px adentro en pantalla angosta: ese valor es
     el ancho del menu lateral, que ahi no esta, asi que la barra se salia por la derecha —
     justo en la vista lista, que es la de celular—.
   [v2026.10.20-3] 2026-10-20 (3) | + .emb-filter-dias y .emb-dia-chip: los chips del filtro de
     ACTIVIDAD en el panel (embudos.html [v2026.10.20-3]). Mismo aspecto que el resto de los
     chips del modulo; no se reusa .emb-filter-stage-chip porque ese es un desplegable de uno
     solo y estos son cuatro opciones a la vista.
   [v2026.10.20-2] 2026-10-20 (2) | MOVER A VARIOS (embudos.js [v2026.10.20-2]).
     + .emb-card.pendiente y .emb-pend-sello: lo arrastrado y todavia sin confirmar se ve
       distinto —borde punteado y sello—, porque si se viera igual nadie sabria que falta
       confirmar. + .emb-confirm-bar: la barra de Confirmar o Deshacer.
     + .emb-drag-bulto: el contador que sigue al cursor, para que arrastrar 40 no se vea
       igual que arrastrar uno. + .emb-select-mover-btn y lo del dialogo de lote
       (.emb-lote-*), con su propio pie .emb-lote-foot: .emb-modal-foot ya existe y la
       usan otros modales del modulo, asi que no se toca ni se duplica.
   [v2026.10.20-1] 2026-10-20 | EL TABLERO CON MUCHOS CONTACTOS, parte 1: filtrar y marcar
     (embudos.js [v2026.10.20-1], embudos.html [v2026.10.20-1]; preview aprobado por Alberto).
     + .emb-col-head como CINTA del color del SERVICIO del embudo (--tono, que pinta el JS con
       el `color` que ahora trae cada embudo del backend): linea de 3px arriba, esquinas altas
       y fondo del mismo tono al 10%. Antes todas las cabeceras eran blancas e iguales y se
       confundian con las tarjetas de los contactos, que tambien son blancas.
     + .emb-col-check: el interruptor de cada embudo, en su cabecera. Apagarlo lo deja fuera de
       lo que se ve, se marca y se mueve.
     + .emb-col.apagada y .emb-col-vert: un embudo apagado NO desaparece —si desaparece no queda
       desde donde volver a encenderlo—: se repliega a una franja con su nombre en vertical.
     + .emb-canal-bar y .emb-canal-btn: los cuatro canales como iconos, sin etiquetas, para no
       gastar una linea entera de la barra. Son SUMATIVOS: WhatsApp, despues + Instagram.
     + .emb-col-badge b: el contador dice 2/693 cuando hay gente marcada en ese embudo.
   [v2026.10.08-1] 2026-10-08 | + #emb-prof-bar .emb-prof-cand: «Todo el equipo» con candado en la barra de
     profesionales cuando falta «Ver disponibilidad de todos» (embudos.js [v2026.10.08-1]). Su globo se abre
     hacia la DERECHA desde el borde izquierdo del chip: la barra empieza pegada al borde del tablero y,
     abierto hacia la izquierda (lo normal de hvy-permisos.css), se cortaba.
   [v2026.10.04-1] 2026-10-04 | + .emb-lis-canal.heavensy: en la vista lista, el punto de los clientes del
     chat de la página es morado, como en el tablero (.emb-canal-dot.heavensy). Salía verde, el de WhatsApp.
     Y «Administrar embudos» toma el ancho de lo que muestra (width: max-content, hasta 420 px o el 90 %
     de la pantalla): era un panel absoluto dentro de un contenedor chico, se quedaba en su mínimo de 290 px
     y los nombres («Sesión de terapia») y «2 contactos» se partían en varias líneas.
   [v2026.10.01-1] 2026-10-01 | − .emb-attach-btn, .emb-dest-chip, .emb-dest-x y .emb-canal-btn:
     eran del modal propio de mensajes, que se retira (embudos.js [v2026.10.01-1]); el mensaje
     a seleccionados usa el modal común (hvy-mensaje-sel.css).
   [v2026.09.10-1] 2026-09-10 | + el aspecto de lo que el plan no permite en el tablero:
     .emb-fija (la tarjeta y la columna que no se pueden arrastrar), .emb-aviso (el
     motivo, explicado UNA vez arriba en lugar de repetirlo en cada tarjeta),
     .emb-sin-plan (el módulo entero fuera del plan) y .emb-empty-propio (el tablero
     del profesional que aún no tiene clientes, que antes decía "sin contactos" y
     parecía un error). Va con embudos.js [v2026.09.10-1]. El candado y su globo son
     comunes y viven en hvy-permisos.css.
   [v2026.08.22-12] 2026-08-22 (12) | + .en-zona: al arrastrar, la etapa de destino se
     marca COMPLETA y no solo su encabezado. Con el encabezado pegado arriba (sticky),
     iluminar esa franja de 25 px no decia donde iba a caer la tarjeta — y en el telefono
     era imposible acertarle con el dedo.
   [v2026.08.22-11] 2026-08-22 (11) | El desplegable de EMBUDO del panel de filtros gana
     alto maximo y scroll. Con un embudo por especialidad MAS uno por programa la lista
     pasa los veinte y llegaba al borde inferior de la pantalla: el ultimo quedaba
     cortado y no habia como alcanzarlo.
     El alto va en vh y no en px: es position:fixed, asi que no depende del contenedor
     sino de la pantalla — 400 px fijos taparian todo en un portatil.
   [v2026.08.22-10] 2026-08-22 (10) | Vuelve .emb-tip (blanco, con titulo). El bug no era
     tener tooltip propio sino el NOMBRE del atributo: data-tip lo pinta un selector
     global de configuracion.css —el negro— y salian los dos. Ahora es data-emb-tip.
   [v2026.08.22-9] 2026-08-22 (9) | Se retira .emb-tip: el panel ya tiene su tooltip en
     configuracion.css y salian los dos. Un modulo mas con su propio sistema seria un
     cuarto lugar donde cambiar el estilo el dia que se toque.
   [v2026.08.22-8] 2026-08-22 (8) | + .emb-vacios-btn con su estilo propio: el boton
     heredaba la clase del vecino y salia con el icono negro sobre blanco. Ahora usa el
     gris de los demas iconos del panel (#6b7194) y se enciende en violeta al activarse,
     como el resto de los controles.
   [v2026.08.22-7] 2026-08-22 (7) | + .emb-aviso-vacios: la linea que dice cuantos
     embudos se ocultaron por estar vacios, con enlace para mostrarlos. Sin ella, un
     embudo recien creado desaparece y no hay como saber por que.
   [v2026.08.22-6] 2026-08-22 (6) | + .emb-tip: los tooltips del modulo dejan de ser los
     del navegador (el atributo title), que son feos y tardan un segundo en aparecer —
     justo cuando alguien duda de que hace un boton.
     DUPLICACION CONSCIENTE: este estilo es hermano de .cal-pay-tip de calendario.css.
     Se copia en vez de compartirse porque cada modulo mantiene sus propios archivos;
     queda anotado que si cambia uno hay que mirar el otro. El dia que sean cuatro
     modulos, conviene un CSS comun del panel.
   [v2026.08.22-5] 2026-08-22 (5) | La lista de embudos pasa a TARJETAS con sombra, como
     las del tablero: la separacion la dan el aire y la sombra, no una linea. La franja
     gruesa se veia pesada y la linea de 1 px no se notaba — con tarjetas el problema
     desaparece porque cada embudo es un objeto, no una fila de una lista continua.
     El fondo de la lista es GRIS a proposito: sobre blanco una sombra suave no se ve, y
     habria que oscurecerla tanto que se veria sucia.
     Se retira la barra de distribucion: un segmento de color sin rotulo obliga a
     descifrarlo y se parece a una barra de progreso, que es otra cosa. Los circulos con
     su numero y el nombre de la etapa dicen lo mismo sin pedir interpretacion; por eso
     crecen un poco, ahora que son la unica senal de color.
     + Linea bajo los filtros: son controles y el listado es contenido, y sin separacion
     el primer embudo parecia parte de la barra.
   [v2026.08.22-4] 2026-08-22 (4) | + .emb-lis-acc y .emb-lis-mover: el chip de etapa y
     el boton de mover entre embudos, juntos al final de la fila. Son las dos acciones
     que el tablero ofrece sobre un contacto y ahora la lista tambien.
   [v2026.08.22-3] 2026-08-22 (3) | La lista de "Administrar embudos" gana alto maximo y
     scroll propio. Con un embudo por especialidad MAS uno por programa, el panel crecia
     hasta salirse de la pantalla y el boton de crear quedaba fuera de alcance: no habia
     forma de llegar al final sin desplazar la pagina entera.
     El alto se fija en vh y no en px: en un telefono apaisado, 400 px fijos taparian
     todo, y en un monitor grande desaprovecharian el espacio.
   [v2026.08.22-2] 2026-08-22 (2) | El display de la lista y del tablero se decide ACA,
     con la clase .emb-modo-lista en el contenedor. La version anterior lo escribia desde
     el JS y ahi estaba el bug: poner display='' borra el estilo en linea y vuelve a
     mandar .emb-lista{display:none}, asi que en modo lista no se veia nada —ni tablero
     ni lista— y parecia que habian desaparecido los embudos.
     Un display con dos duenos: el mismo error del ancho del cajon del menu.
   [v2026.08.22-1] 2026-08-22 | Estilos de la VISTA LISTA (embudos-lista.js): el modulo
     en pantalla angosta. El tablero es de columnas y en un telefono caben una y media;
     ademas un embudo vacio ocupa una pantalla entera para decir "sin contactos".
     Dos niveles: los embudos con su barra de distribucion por etapa, y al tocar uno,
     sus etapas con la gente debajo. El chip para mover de etapa reusa .emb-stage-chip
     del tablero — es la misma accion y ya estaba resuelta.
   [v2026.08.13-2] embudos.css
   2026-08-13 (2) | + .emb-nuevo-btn, .emb-nuevo-input y .emb-nuevo-error: el botón y el
     diálogo para crear un embudo propio. El botón va con borde punteado, que es como se
     lee "agregar" sin competir con las acciones de cada fila.
   [v2026.08.13-1] embudos.css
   2026-08-13 | + estilos de .emb-confirm-*: la confirmación propia del módulo, que
     reemplaza a window.confirm. Mismo lenguaje visual que el resto de Embudos.
── */
/* ── EMBUDOS KANBAN — HEAVENSY ── */

/* [21-10-2026] LAS DECISIONES DE LA COLUMNA-TARJETA, EN UN SOLO LUGAR.
   El tablero y la vista por estado tienen que verse iguales; mientras los valores
   estuvieran escritos dos veces, tarde o temprano uno se corregía y el otro no —ya pasó
   con las esquinas de la cinta—. Las dos vistas leen de acá.
   La sombra la afinó Alberto el 21-10 sobre el preview: su tercer valor va con Y NEGATIVA
   y vive en la columna, no en la cinta. Las sombras normales caen hacia abajo y dejaban el
   borde de ARRIBA sin separar del gris del tablero, que ahí son dos claros pegados. Puede
   ir en la columna aunque ésta recorte su contenido, porque overflow:hidden no recorta la
   sombra del propio elemento. */
:root {
  --emb-sep: 8px;                 /* aire entre columnas y contra el borde del tablero */
  --emb-fondo: #f4f4f8;           /* el gris sobre el que se despegan */
  --emb-radio: 14px;              /* esquinas de la columna; la cinta la recorta ella */
  --emb-sombra:
    0 1.5px 3px rgba(30,25,80,.07),
    0 9px 21px rgba(30,25,80,.11),
    0 -1.5px 4px rgba(30,25,80,.08);
  --emb-sombra-cinta: 0 2.5px 7px rgba(30,25,80,.10);
  /* Al pasar el mouse la columna sube 2 px: el mismo gesto de las tarjetas de contacto
     (que suben 1), un poco más marcado porque el objeto es más grande. */
  --emb-levante: -2px;
  --emb-sombra-alta:
    0 3px 6px rgba(30,25,80,.09),
    0 16px 34px rgba(30,25,80,.15),
    0 -2px 6px rgba(30,25,80,.10);
}

.emb-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--hv-lista-fondo, #F8F8FA);   /* [23-10-2026] el gris de las listas de tarjetas */
  overflow: hidden;
  width: calc(100% + 16px);
  margin: 0 -8px;
}

/* [23-10-2026] EL ENCABEZADO COMO TARJETA: la barra dentro de #emb-cabecera (.hv-cabecera.ancha), sobre el
   gris. Adentro, sin fondo ni rayas propias. [23-10 (2)] La fila mide lo que el título único (.hv-titulo,
   48px): el aire vertical lo da ella. */
#emb-cabecera { position: relative; }
#emb-cabecera .emb-topbar { background: transparent; border-bottom: none; padding: 0 16px; }
/* [23-10-2026 (2)] LOS FILTROS FLOTAN (como en Calendario): el panel bajo la cabecera, de borde a borde,
   sobre el tablero; adentro las filas FILTRAR / ESTADOS / SERVICIOS sin fondo ni rayas propias. */
.emb-filtros-flot { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; padding: 6px 0 4px; }
.emb-filtros-flot #emb-prof-bar { border-bottom: none !important; padding: 2px 16px 4px !important; }
.emb-filtros-flot .emb-chipbar { background: transparent; border-bottom: none; box-shadow: none; padding: 4px 16px 6px; }

/* TOPBAR */
.emb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  flex-shrink: 0;
  gap: 12px;
}
.emb-topbar-left  { display: flex; align-items: center; gap: 9px; flex: 1; }
/* [27-10-2026] En pantallas angostas no caben el título, su «?», las vistas y el tamaño: queda el ícono del módulo con
   su «?» (antes, a 768px, el título ya quedaba en «…»). */
@media (max-width: 768px) { .emb-topbar-title { display: none; } }
.emb-topbar-right { display: flex; align-items: center; gap: 8px; }
/* [23-10-2026 (2)] .emb-topbar-title ya no lleva letra propia: la pinta .hv-titulo-txt (hv-tarjeta.css). */

/* [20-10-2026 (7)] EL CONMUTADOR DE VISTAS. Un segmentado, no tres botones sueltos: las
   tres son la misma decisión y tienen que leerse como un control, no como tres acciones.
   Va junto al título porque elegir vista no es filtrar, y porque la barra derecha ya
   venía apretada en celular. Iconos sin texto: con palabras no entra en un teléfono. */
.emb-vistas {
  display: flex; gap: 2px; flex-shrink: 0;
  background: #f4f4f8; border: 1.5px solid #e8e8ef; border-radius: 10px; padding: 2px;
  margin-left: 4px;
}
.emb-vista-btn {
  border: none; background: none; cursor: pointer; color: #a4a4b0;
  width: 32px; height: 28px; border-radius: 8px; font-size: 13px;
  display: flex; align-items: center; justify-content: center; transition: all .14s;
}
.emb-vista-btn:hover { color: #9961FF; }
.emb-vista-btn.on { background: #fff; color: #9961FF; box-shadow: 0 1px 3px rgba(0,0,0,.10); }
/* [21-10-2026] El botón puesto se abre y escribe su nombre: la pantalla dice en qué vista
   estás sin gastar un título aparte, y de paso se entiende qué hacen los otros dos, que
   hoy hay que adivinar o esperar el globo. */
.emb-vista-btn.on { width: auto; padding: 0 11px; gap: 6px; }
.emb-vista-nom { font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 700;
  white-space: nowrap; }

/* [21-10-2026] EL TAMAÑO DEL TABLERO. Vive junto al conmutador porque es lo mismo: cómo
   se ve, no qué se ve. El `zoom` se aplica solo a los tres paneles de tarjetas, así que
   la barra de arriba, los chips y el buscador quedan del tamaño de siempre, y la barra
   lateral y la nav del panel —que están fuera de .emb-wrap— ni se enteran. */
.emb-zoom {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 6px;
  background: #f4f4f8; border: 1.5px solid #e8e8ef; border-radius: 10px; padding: 2px;
}
.emb-zoom-btn {
  border: none; background: none; cursor: pointer; color: #a4a4b0;
  width: 24px; height: 24px; border-radius: 7px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; transition: all .14s;
}
.emb-zoom-btn:hover:not(:disabled) { background: #fff; color: #9961FF; }
.emb-zoom-btn:disabled { opacity: .35; cursor: default; }
.emb-zoom-n {
  font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 700;
  color: #8a8a99; min-width: 32px; text-align: center;
  font-variant-numeric: tabular-nums;   /* los números no bailan al cambiar de nivel */
}
#emb-board, .emb-est-board, .emb-lista { zoom: var(--emb-zoom, 1); }

.emb-btn-group {
  display: inline-flex; align-items: center;
  background: #9961FF; border: none;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(153,97,255,0.35);
}
.emb-btn-group-item {
  background: none; border: none; cursor: pointer;
  padding: 8px 14px; font-size: 15px; color: #fff;
  transition: background .15s;
  display: flex; align-items: center;
}
.emb-btn-group-item:hover { background: rgba(255,255,255,0.15); }
.emb-btn-group-divider {
  width: 1px; height: 20px; background: rgba(255,255,255,0.3); flex-shrink: 0;
}

/* compat — used in modal footer */
.emb-btn-edit {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px; padding: 7px 14px;
  font-size: 12px; font-weight: 600; color: #383838;
  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s;
}
.emb-btn-edit:hover { background: #f5f5f5; }
.emb-btn-new {
  display: inline-flex; align-items: center; gap: 6px;
  background: #9961FF; border: none;
  border-radius: 8px; padding: 7px 14px;
  font-size: 12px; font-weight: 600; color: #fff;
  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: opacity .15s;
}
.emb-btn-new:hover { opacity: .88; }

/* BUSCADOR */
.emb-search-wrap {
  display: flex; align-items: center; gap: 6px; flex: 1;
  max-width: 340px;
}
.emb-search-box {
  position: relative; flex: 1;
}
.emb-search-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: rgba(56,56,56,0.35); font-size: 12px; pointer-events: none;
}
.emb-search-input {
  width: 100%; padding: 7px 12px 7px 30px;
  border: 1.5px solid rgba(0,0,0,0.1); border-radius: 8px;
  font-size: 12px; color: #383838; outline: none;
  font-family: 'DM Sans', sans-serif; box-sizing: border-box;
  transition: border-color .15s; background: #fff;
}
.emb-search-input:focus { border-color: #9961FF; }

.emb-filter-wrap { position: relative; flex-shrink: 0; }
.emb-filter-btn {
  position: relative;
  background: #fff; border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 8px; padding: 7px 11px; cursor: pointer;
  color: #383838; font-size: 14px; transition: all .15s;
  display: flex; align-items: center;
}
.emb-filter-btn:hover { border-color: #9961FF; color: #9961FF; }
.emb-filter-btn.active { border-color: #9961FF; color: #9961FF; background: #f5f0ff; }
.emb-filter-dot {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #9961FF; border: 1.5px solid #fff;
}
.emb-filter-panel {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  z-index: 100; min-width: 200px;
}
.emb-filter-panel.open { display: block; }
.emb-filter-label {
  font-size: 10px; font-weight: 700; color: rgba(56,56,56,0.45);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.emb-filter-select {
  width: 100%; padding: 7px 10px;
  border: 1.5px solid rgba(0,0,0,0.1); border-radius: 8px;
  font-size: 12px; color: #383838; background: #fff;
  outline: none; cursor: pointer; font-family: 'DM Sans', sans-serif;
}
.emb-filter-select:focus { border-color: #9961FF; }
.emb-filter-vip {
  width: 100%; padding: 7px; margin-top: 0;
  background: #fff; border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 8px; font-size: 12px; font-weight: 600; color: #383838;
  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.emb-filter-vip:hover  { border-color: #9961FF; background: #f5f0ff; }
.emb-filter-vip.active { border-color: #9961FF; background: #f5f0ff; color: #9961FF; }
.emb-filter-clear {
  width: 100%; margin-top: 8px; padding: 7px;
  background: none; border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 8px; font-size: 12px; color: rgba(56,56,56,0.5);
  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s;
}
.emb-filter-clear:hover { border-color: #dc2626; color: #dc2626; }

/* BOARD */
/* [21-10-2026] Las columnas dejan de ser franjas pegadas y pasan a ser TARJETAS
   separadas, despegadas del fondo (decisión de Alberto, 21-10, sobre el preview). El
   fondo gris es el que las deja verse: sin él, tarjetas claras sobre blanco no se
   despegan de nada. Los mismos tres valores en .emb-est-board, que es la otra vista de
   lo mismo. */
.emb-board {
  display: flex;
  gap: var(--emb-sep);
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px;
  background: var(--emb-fondo);
}
.emb-board::-webkit-scrollbar { height: 6px; }
.emb-board::-webkit-scrollbar-track { background: #F8F8FA; }
.emb-board::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.14); border-radius: 10px; }

/* COLUMNA */
.emb-col {
  display: flex;
  flex-direction: column;
  min-width: 270px;
  width: 270px;
  flex-shrink: 0;
  background: #F8F8FA;
  border-radius: var(--emb-radio);
  /* Recorta la cinta contra las esquinas: así la cinta no necesita radio propio y no hay
     dos redondeos que mantener de acuerdo. */
  overflow: hidden;
  box-shadow: var(--emb-sombra);
  transition: background .2s, box-shadow .2s, transform .15s;
}
/* [21-10-2026] El levante: la columna entera se mueve al pasar el mouse por cualquier
   parte de ella (Alberto, 21-10), el mismo gesto que ya tenían las tarjetas de contacto.
   Los globos y los menús cuelgan de <body>, así que este transform no los descoloca; si
   alguna vez alguien los mete DENTRO de la columna, se van a posicionar respecto de ella
   y hay que volver a sacarlos. */
.emb-col:hover { transform: translateY(var(--emb-levante)); box-shadow: var(--emb-sombra-alta); }
.emb-col.drag-over     { background: rgba(153,97,255,0.07); }
.emb-col.col-drag-over { outline: 2.5px dashed #9961FF; outline-offset: -3px; background: rgba(153,97,255,0.05); }

.emb-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px 10px;
  /* [20-10-2026] LA CINTA. El color sale del servicio que generó el embudo (--tono, que
     pone el JS); sin color, el violeta de la casa.
     [21-10-2026] Se va la raya de 3 px de arriba y se va el borde de abajo (Alberto, 21-10:
     «sin raya de color, con color más profundo, letras que se destaquen del color»). El
     relleno y la letra ya no son un alfa fijo: los calcula embudos.js bajando el tono hasta
     que la letra alcanza 4.5:1 sobre su propio fondo, color por color, porque los colores
     los elige cada empresa y un ámbar no se comporta como un violeta.
     Sin borde, lo que separa la cinta del fondo de la columna es su sombra. */
  background: var(--tono-suave, var(--emb-tinte, #fff));
  box-shadow: var(--emb-sombra-cinta);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 2;
}
.emb-col-head .emb-col-name { color: var(--tono-texto, #383838); }

/* [20-10-2026] El interruptor del embudo, en su propia cabecera: el control queda donde
   está la cosa que controla, y así la barra no gasta una línea en listarlos. */
.emb-col-check {
  width: 17px; height: 17px; border-radius: 5px; flex-shrink: 0;
  /* [21-10-2026] El borde pasa al color entero: sobre la cinta con relleno, el tono al
     32 % quedaba casi invisible. */
  border: 1.5px solid var(--tono, rgba(0,0,0,.18));
  background: #fff; color: #fff; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s;
}
.emb-col-check.on { background: var(--tono, #9961FF); border-color: var(--tono, #9961FF); }
.emb-col-check:hover { border-color: var(--tono, #9961FF); }

/* Marcar o soltar TODOS los de la columna */
/* [21-10-2026] Los iconos de la cinta toman su color, pero apagados: si fueran el color
   entero, «marcar todos» se vería igual puesto que sin poner, y ese botón vive justamente
   de esa diferencia. La distinción es de intensidad, no de color. */
.emb-col-todos {
  background: none; border: none; cursor: pointer;
  color: var(--tono-texto, rgba(56,56,56,0.3)); opacity: .55;
  font-size: 14px; padding: 2px 4px;
  transition: color .15s, opacity .15s; flex-shrink: 0;
}
.emb-col-todos:hover { opacity: .85; }
.emb-col-todos.puestos { color: var(--tono-texto, #9961FF); opacity: 1; }

/* [20-10-2026] Un embudo apagado se repliega, no se esconde: si desapareciera no quedaría
   desde dónde encenderlo de nuevo. Toda la franja vuelve a encenderlo. */
.emb-col.apagada {
  width: 46px; min-width: 46px; background: #fbfbfc; cursor: pointer;
}
.emb-col.apagada .emb-col-list { display: none; }
.emb-col.apagada .emb-col-head {
  height: 100%; border-radius: 0; padding: 12px 0;
  flex-direction: column; justify-content: flex-start; gap: 10px;
}
.emb-col.apagada .emb-col-name,
.emb-col.apagada .emb-col-badge,
.emb-col.apagada .emb-col-msg,
.emb-col.apagada .emb-col-todos { display: none; }
.emb-col-vert {
  display: none;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--tono, #9961FF);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 72%;
}
.emb-col.apagada .emb-col-vert { display: block; }

/* [20-10-2026] Los canales, como iconos. Cuatro caben en el ancho de una palabra, y
   sumativos: se van poniendo de a uno. */
.emb-canal-bar { display: flex; gap: 4px; flex-shrink: 0; }
.emb-canal-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,0.1); background: #fff;
  color: rgba(56,56,56,0.4); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .13s;
}
.emb-canal-btn:hover { border-color: var(--c); color: var(--c); }
/* [20-10-2026 (5)] Puesto = borde del color, relleno del MISMO color muy transparente
   (--cs, que calcula el JS) e icono en color. Es la receta de .emb-filter-btn.active, con
   la que convive en la barra; el relleno sólido se la comía entera. */
.emb-canal-btn.on { border-color: var(--c); background: var(--cs); color: var(--c); }
/* El logo de Heavensy es una imagen y no se tiñe con `color`: apagado va en gris y medio
   transparente, puesto va entero. El mismo gesto que los iconos tipográficos. */
.emb-canal-btn img {
  width: 17px; height: 17px; object-fit: contain; display: block;
  filter: grayscale(1); opacity: .42; transition: all .13s;
}
.emb-canal-btn:hover img, .emb-canal-btn.on img { filter: none; opacity: 1; }
.emb-col-icon {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg,#9961FF,#5b8dee);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; flex-shrink: 0;
}
.emb-col-name {
  font-size: 12px; font-weight: 700; color: #383838;
  font-family: 'Poppins', sans-serif; flex: 1;
  /* [20-10-2026 (5)] Una sola línea SIEMPRE: si envuelve, esa cinta crece y las columnas
     quedan desparejas. El nombre entero sale en el globo, que engancha embudos.js solo
     cuando de verdad no cabe. min-width:0 es imprescindible: un hijo flex no baja de su
     contenido mínimo por su cuenta y sin eso el corte no llegaría a ocurrir. */
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: default;
}
.emb-col-badge b { font-weight: 800; }
.emb-col-badge {
  font-size: 10px; font-weight: 700;
  background: var(--tono-chip, rgba(153,97,255,0.1));
  color: var(--tono-texto, #9961FF);
  border-radius: 20px; padding: 2px 8px; flex-shrink: 0;
}
.emb-col-add, .emb-col-msg {
  background: none; border: none; cursor: pointer;
  color: var(--tono-texto, rgba(56,56,56,0.3)); opacity: .55;
  font-size: 14px; padding: 2px 4px;
  transition: color .15s, opacity .15s; flex-shrink: 0;
}
.emb-col-add:hover, .emb-col-msg:hover { opacity: 1; }

/* LISTA */
.emb-col-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.emb-col-list::-webkit-scrollbar { width: 3px; }
.emb-col-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }

/* CARD */
.emb-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 12px 12px 10px;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: box-shadow .2s, transform .15s;
  position: relative;
  user-select: none;
}
.emb-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); transform: translateY(-1px); }
.emb-card.dragging { opacity: .45; cursor: grabbing; transform: scale(.97); }
.emb-est-card.drag-placeholder,
.emb-card.drag-placeholder {
  background: rgba(153,97,255,0.06);
  border: 2px dashed rgba(153,97,255,0.35);
  box-shadow: none; transform: none;
}

.emb-card { padding-left: 12px; }


.emb-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.emb-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg,#8e84fa 0%,#91c0ff 55%) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0; position: relative;
}
.emb-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; position:absolute; inset:0; }

.emb-canal-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; color: #fff;
}
.emb-canal-dot.whatsapp  { background: #25D366; }
.emb-canal-dot.instagram { background: radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%); }
.emb-canal-dot.messenger { background: #0084FF; }
/* [20-10-2026 (5)] El sello de Heavensy lo pinta su propio logo (embudos.js lo mete como
   <img>), así que el fondo va blanco: el disco azul viene en la imagen. */
.emb-canal-dot.heavensy  { background: #fff; overflow: hidden; }
.emb-canal-dot img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.emb-card-info { flex: 1; min-width: 0; }
.emb-card-name { font-size: 12.5px; font-weight: 700; color: #383838; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb-card-loc  { font-size: 10px; color: rgba(56,56,56,0.45); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb-card-bottom { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.emb-card-time { font-size: 10px; color: rgba(56,56,56,0.4); white-space: nowrap; flex-shrink: 0; }

/* Badge no leídos — esquina superior derecha DENTRO de la card */
.emb-unread-badge {
  position: absolute;
  top: 8px; right: 2mm;
  width: 18px; height: 18px;
  background: #9961FF;
  color: #fff;
  border-radius: 50%;
  font-size: 9px; font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  line-height: 18px;
  letter-spacing: 0;
  z-index: 3;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

/* Botón mover — debajo del badge, alineado al mismo right */
.emb-card-move {
  position: absolute;
  top: 30px; right: 2mm;
  width: 18px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: rgba(56,56,56,0.2); font-size: 12px; padding: 0;
  transition: color .15s; line-height: 1;
}
.emb-card-move:hover { color: #9961FF; }

.emb-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.emb-tag {
  font-size: 9.5px; font-weight: 600; padding: 2px 7px;
  border-radius: 20px; white-space: nowrap;
}
.emb-tag-svc   { background: rgba(93,109,207,0.1); color: #5D6DCF; }
.emb-tag-stage { background: rgba(153,97,255,0.1); color: #9961FF; }
.emb-tag-canal-whatsapp  { background: rgba(37,211,102,0.12); color: #16a34a; }
/* [20-10-2026 (6)] Instagram y Heavensy, en los mismos colores que el resto del panel.
   Estas etiquetas hoy no las pinta nadie —quedaron de una version anterior de la tarjeta—
   pero se dejan alineadas: si alguna vuelve a usarse, vuelve con el color correcto. */
.emb-tag-canal-instagram { background: rgba(225,48,108,0.1);  color: #E1306C; }
.emb-tag-canal-messenger { background: rgba(0,132,255,0.1);   color: #0084FF; }
.emb-tag-canal-heavensy  { background: rgba(79,119,241,0.1);  color: #4f77f1; }

/* SELECCIÓN */
/* [23-10-2026 (2)] La marcada con el look de la tarjeta seleccionada del editor (hv-tarjeta.css: fondo
   azul-lila, borde fino, sombra), más el tilde; sin el anillo violeta grueso (Alberto, 22/23-10). */
.emb-card.selected { background: var(--hv-abierta-fondo); border: var(--hv-abierta-borde); box-shadow: var(--hv-abierta-sombra); }
.emb-card-check {
  position: absolute; top: 6px; left: 8px; z-index: 10;
  width: 16px; height: 16px; border-radius: 50%;
  background: #9961FF; color: #fff; font-size: 7px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(153,97,255,0.5);
}
.emb-select-bar {
  display: none; position: fixed;
  bottom: 0; left: 176px; right: 0; z-index: 150;
  background: #fff; border-top: 2px solid #9961FF;
  padding: 10px 22px; align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4px 24px rgba(153,97,255,0.15); gap: 14px;
}
.emb-select-bar.visible { display: flex; }
.emb-select-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
#emb-select-count { font-size: 13px; font-weight: 700; color: #9961FF; white-space: nowrap; }
.emb-select-names { font-size: 12px; color: rgba(56,56,56,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb-select-msg-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #9961FF; border: none; border-radius: 9px;
  padding: 9px 18px; font-size: 13px; font-weight: 600; color: #fff;
  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: opacity .15s;
}
.emb-select-msg-btn:hover { opacity: .88; }
.emb-select-clear-btn {
  background: none; border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 8px; padding: 8px 11px; font-size: 14px;
  color: rgba(56,56,56,0.45); cursor: pointer; transition: all .15s;
}
.emb-select-clear-btn:hover { border-color: #dc2626; color: #dc2626; }

/* ── MOVER A VARIOS  [20-10-2026] ──────────────────────────────────────────── */
/* Lo que se arrastró y todavía no se confirma: está en el destino, pero se nota que no
   es definitivo. Si se viera igual que el resto, nadie sabría que falta confirmar. */
.emb-card.pendiente {
  border: 1.5px dashed #9961FF; background: #faf8ff;
}
.emb-card.pendiente .emb-card-name { color: #5a37c4; }
/* [20-10-2026 (8)] Y lo mismo en la vista por estado, que reusa el sello tal cual. */
.emb-est-card.pendiente { border: 1.5px dashed #9961FF; background: #faf8ff; }
.emb-est-card.pendiente .emb-est-nom { color: #5a37c4; }
.emb-pend-sello {
  position: absolute; top: 7px; right: 2mm;
  font-size: 9px; font-weight: 700; color: #9961FF;
  background: rgba(153,97,255,.12); border-radius: 20px; padding: 2px 7px;
  z-index: 3;
}

.emb-confirm-bar {
  display: none; position: fixed; bottom: 0; left: 176px; right: 0; z-index: 151;
  background: #f8f7ff; border-top: 2px solid #9961FF;
  padding: 10px 22px; align-items: center; justify-content: space-between; gap: 14px;
  box-shadow: 0 -4px 24px rgba(153,97,255,.15);
}
.emb-confirm-bar.visible { display: flex; }
.emb-confirm-txt { font-size: 12.5px; color: #5a37c4; }
.emb-confirm-txt b { font-weight: 700; }

/* El bulto que sigue al cursor cuando se arrastra más de uno: sin él, arrastrar 40
   contactos se ve igual que arrastrar uno. */
.emb-drag-bulto {
  position: fixed; z-index: 9500; pointer-events: none; display: none;
  background: #9961FF; color: #fff; border-radius: 20px; padding: 5px 13px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(153,97,255,.45);
}

.emb-select-mover-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #9961FF; border: none; border-radius: 9px;
  padding: 9px 16px; font-size: 13px; font-weight: 600; color: #fff;
  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: opacity .15s;
}
.emb-select-mover-btn:hover { opacity: .88; }

.emb-lote-etapas { display: flex; flex-wrap: wrap; gap: 6px; }
.emb-lote-etapa {
  border: 1px solid #d8def0; border-radius: 14px; padding: 4px 11px;
  font-size: 11.5px; color: #5b6478; cursor: pointer; transition: all .13s;
}
.emb-lote-etapa:hover { border-color: #9961FF; }
.emb-lote-etapa.on { background: #efeaff; border-color: #9961FF; color: #5a37c4; font-weight: 600; }
.emb-lote-sacar {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  margin-top: 14px; font-size: 12.5px; color: rgba(56,56,56,.75);
}
.emb-lote-check {
  width: 17px; height: 17px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,.2); background: #fff; color: #fff; font-size: 9px;
  display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.emb-lote-check.on { background: #9961FF; border-color: #9961FF; }
.emb-lote-resumen {
  margin-top: 14px; padding: 10px 12px; background: #f8f7ff;
  border-left: 3px solid #9961FF; border-radius: 0 8px 8px 0;
  font-size: 12px; color: rgba(56,56,56,.7); line-height: 1.55;
}
/* El pie del diálogo de lote: .emb-modal-foot YA existe más abajo y la usan otros
   modales del módulo; no se toca ni se duplica. Este solo agrega la fila de botones. */
.emb-lote-foot {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 12px 18px; border-top: 1px solid rgba(0,0,0,0.07); flex-shrink: 0;
}

/* VACÍO */
.emb-empty {
  text-align: center; padding: 32px 16px;
  font-size: 12px; color: rgba(56,56,56,0.3);
}
.emb-empty i { font-size: 28px; display: block; margin-bottom: 8px; opacity: .3; }

/* MODAL */
.emb-overlay {
  position: fixed; inset: 0;
  background: rgba(10,20,60,0.4); backdrop-filter: blur(4px);
  z-index: 9000; display: none; align-items: center; justify-content: center;
}
.emb-overlay.open { display: flex; }
.emb-modal {
  background: #fff; border-radius: 18px;
  width: 92%; max-width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  overflow: hidden; max-height: 80vh;
  display: flex; flex-direction: column;
}
.emb-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid rgba(0,0,0,0.07);
  font-size: 14px; font-weight: 700; color: #383838;
  font-family: 'Poppins', sans-serif; flex-shrink: 0;
}
.emb-modal-close { background:none; border:none; cursor:pointer; color:rgba(56,56,56,0.4); font-size:14px; }
.emb-modal-close:hover { color:#383838; }
.emb-modal-body { padding: 14px 18px; overflow-y: auto; flex: 1; }
.emb-modal-foot { padding: 12px 18px; border-top: 1px solid rgba(0,0,0,0.07); flex-shrink:0; }
.emb-btn-primary {
  width:100%; padding:10px; background:linear-gradient(135deg,#9961FF,#5b8dee);
  border:none; border-radius:10px; color:#fff; font-size:13px; font-weight:600;
  cursor:pointer; font-family:'DM Sans',sans-serif;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.emb-btn-primary:hover { opacity:.9; }

/* [22-08 (3)] La lista de embudos del panel: alto maximo y scroll. Con uno por
   especialidad mas uno por programa, la lista crece sin techo y empuja el boton de
   crear fuera de la pantalla. */
#emb-edit-list {
  max-height: 46vh;
  overflow-y: auto;
  overflow-x: hidden;
  /* Espacio para que la ultima fila no quede pegada al borde del scroll. */
  padding-right: 4px;
  margin-bottom: 10px;
}
/* La barra, discreta: en un panel chico una barra gruesa se come el ancho util. */
#emb-edit-list::-webkit-scrollbar { width: 6px; }
#emb-edit-list::-webkit-scrollbar-thumb { background: #dcd8ea; border-radius: 3px; }
#emb-edit-list::-webkit-scrollbar-track { background: transparent; }

/* El panel entero tampoco puede pasarse: si la pantalla es baja, manda ella. */
#emb-edit-panel {
  max-height: 80vh;
  overflow-y: auto;
  /* [04-10-2026] El ancho de su contenido, con tope: si no, se quedaba en su mínimo y partía los nombres. */
  width: max-content;
  max-width: min(420px, 90vw);
}

/* Fila editar */
.emb-edit-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; margin-bottom:6px;
  border:1px solid rgba(0,0,0,0.07); background:#fafafa;
}
.emb-edit-row-icon { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#9961FF,#5b8dee); display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; flex-shrink:0; }

.emb-edit-row-name { flex:1; font-size:13px; font-weight:600; color:#383838; }
.emb-edit-row-n    { font-size:11px; color:rgba(56,56,56,0.4); white-space:nowrap; }
.emb-edit-row-edit { background:none; border:none; cursor:pointer; color:rgba(91,141,238,0.5); font-size:13px; padding:4px; transition:color .15s; }
.emb-edit-row-edit:hover { color:#5b8dee; }
.emb-edit-row-del  { background:none; border:none; cursor:pointer; color:rgba(220,38,38,0.4); font-size:13px; padding:4px; transition:color .15s; }
.emb-edit-row-del:hover { color:#dc2626; }

/* Fila mover */
.emb-move-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; margin-bottom:6px;
  border:1px solid rgba(153,97,255,0.18); cursor:pointer; transition:background .15s;
}
.emb-move-row:hover { background:#f5f0ff; }
.emb-move-row i { color:#9961FF; font-size:13px; }
.emb-move-row span { flex:1; font-size:13px; font-weight:500; color:#383838; }

/* ── Stage chip dropdown ── */
.emb-stage-wrap { position: relative; display: inline-block; }
.emb-stage-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 600; padding: 2px 7px;
  border-radius: 20px; background: rgba(153,97,255,0.1);
  color: #9961FF; cursor: pointer; user-select: none;
}
.emb-stage-chip:hover { background: rgba(153,97,255,0.18); }
.emb-stage-chip svg { flex-shrink: 0; transition: transform .15s; }
.emb-stage-chip.open svg { transform: rotate(180deg); }
.emb-stage-dropdown {
  display: none; flex-direction: column;
  position: fixed;
  min-width: 130px; z-index: 9999;
  background: #fff; border: 0.5px solid rgba(153,97,255,0.25);
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.15);
  overflow: hidden;
}
.emb-stage-dropdown.open { display: flex; }
.emb-stage-option {
  font-size: 11px; font-weight: 500; padding: 7px 12px;
  cursor: pointer; color: #374151; transition: background .12s;
  white-space: nowrap;
}
.emb-stage-option:hover { background: #f5f0ff; color: #9961FF; }
.emb-stage-option.active { color: #9961FF; font-weight: 600; background: #f0ebff; }

/* ── Filtro de etapas custom ── */
.emb-filter-stage-chip {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 6px; width: 100%; padding: 6px 10px;
  border: 1px solid rgba(153,97,255,0.3); border-radius: 8px;
  background: #fff; color: #9961FF; font-size: 12px; font-weight: 500;
  cursor: pointer; user-select: none;
}
.emb-filter-stage-chip:hover { background: rgba(153,97,255,0.05); }
.emb-filter-stage-chip svg { flex-shrink:0; transition: transform .15s; }
.emb-filter-stage-chip.open svg { transform: rotate(180deg); }
.emb-filter-stage-dropdown {
  display: none; flex-direction: column;
  position: fixed; min-width: 160px; z-index: 9999;
  background: #fff; border: 0.5px solid rgba(153,97,255,0.25);
  border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.1);
  /* [22-08 (11)] Alto maximo y scroll: con un embudo por especialidad mas uno por
     programa, la lista pasa los veinte y llegaba al borde de la pantalla. En vh porque
     es position:fixed — depende de la pantalla, no del contenedor. */
  max-height: 52vh;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Barra discreta: en un desplegable angosto una gruesa se come el ancho util. */
.emb-filter-stage-dropdown::-webkit-scrollbar { width: 6px; }
.emb-filter-stage-dropdown::-webkit-scrollbar-thumb { background: #dcd8ea; border-radius: 3px; }
.emb-filter-stage-dropdown::-webkit-scrollbar-track { background: transparent; }
/* Las opciones no se aplastan cuando hay scroll. */
.emb-filter-stage-dropdown .emb-filter-stage-option { flex-shrink: 0; }
.emb-filter-stage-dropdown.open { display: flex; }


/* ═══ CONFIRMACIÓN DEL MÓDULO [13-08-2026] ═══
   Reemplaza a window.confirm, que se veía ajeno al panel y no permitía explicar
   qué se pierde. Mismo lenguaje que el resto de Embudos. */
.emb-confirm-overlay{
  display:none;position:fixed;inset:0;z-index:4000;
  background:rgba(30,25,80,.52);align-items:center;justify-content:center
}
.emb-confirm-overlay.open{display:flex}
.emb-confirm-modal{
  background:#fff;border-radius:18px;padding:26px 24px 20px;width:360px;
  max-width:calc(100vw - 40px);text-align:center;
  box-shadow:0 24px 64px rgba(10,0,60,.22)
}
.emb-confirm-icon{
  width:46px;height:46px;border-radius:50%;margin:0 auto 14px;
  background:#fdeaea;color:#e2445c;
  display:flex;align-items:center;justify-content:center;font-size:17px
}
.emb-confirm-title{
  font-family:'Poppins',sans-serif;font-size:15.5px;font-weight:700;
  color:#383838;margin-bottom:8px
}
.emb-confirm-msg{
  font-size:12.5px;color:#7a7a8c;line-height:1.6;margin-bottom:20px
}
.emb-confirm-btns{display:flex;gap:10px;justify-content:center}
.emb-confirm-cancel,.emb-confirm-ok{
  border:none;border-radius:9px;padding:9px 20px;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:600
}
.emb-confirm-cancel{background:#fff;color:#7a7a8c;border:1.5px solid rgba(0,0,0,.1)}
.emb-confirm-cancel:hover{background:#f7f7fb}
.emb-confirm-ok{background:#e2445c;color:#fff}
.emb-confirm-ok:hover{filter:brightness(1.07)}

/* Crear embudo propio [13-08-2026] */
.emb-nuevo-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  margin-top:10px;padding:8px;border:1.5px dashed rgba(153,97,255,.45);
  border-radius:9px;background:#faf7ff;color:#9961FF;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:600
}
.emb-nuevo-btn:hover{background:#f3ecff;border-style:solid}
.emb-nuevo-input{
  width:100%;box-sizing:border-box;padding:9px 12px;font-size:13px;
  font-family:'DM Sans',sans-serif;color:#383838;
  border:1.5px solid rgba(0,0,0,.12);border-radius:8px;outline:none
}
.emb-nuevo-input:focus{border-color:#9961FF}
.emb-nuevo-error{
  display:none;margin-top:6px;font-size:11.5px;color:#e2445c
}

/* ═══════════════════════════════════════════════════════════════════════════
   VISTA LISTA  [22-08-2026]  · render en embudos-lista.js
   El modulo en pantalla angosta: dos niveles en vez de columnas horizontales.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ══ [20-10-2026 (7)] VISTA POR ESTADO ═══════════════════════════════════════
   Las columnas son las ETAPAS y los servicios van dentro de la tarjeta. El contenedor se
   muestra con .emb-modo-estados en el padre, nunca con style en línea: escribir el
   display desde el JS fue lo que rompió la vista lista en agosto. */
.emb-estados { display: none; background: #f4f4f8; flex: 1; min-height: 0;
  flex-direction: column; overflow: hidden; }
.emb-modo-estados .emb-estados { display: flex; }
.emb-modo-estados #emb-board { display: none !important; }

/* [21-10-2026] LA BARRA DE CHIPS, una sola para los dos ejes. El tablero la llena con
   ETAPAS y la vista por estado con SERVICIOS: es el mismo control mirando el otro lado,
   así que se llama con nombre neutro y no «svcbar». La pinta _embBarraChips. */
.emb-chipbar {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 9px 14px; background: #fff; border-bottom: 1px solid #ebe9f2;
  overflow-x: auto; box-shadow: 0 1px 0 rgba(30,25,80,.03);
}
.emb-chipbar::-webkit-scrollbar { height: 4px; }
.emb-chipbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
.emb-chipbar-et { font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  color: #b4b4c0; flex-shrink: 0; }
/* Puesto = borde del color, relleno del mismo al 11% y letra en color. El mismo gesto de
   los canales y del botón de filtros activo; un relleno sólido se come el panel. */
.emb-chipf {
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 600;
  border: 1.5px solid var(--c); background: var(--cs); color: var(--c);
  border-radius: 20px; padding: 4px 12px; cursor: pointer; white-space: nowrap;
  flex-shrink: 0; transition: all .14s;
}
.emb-chipf.off { border-color: rgba(0,0,0,.1); background: #fff; color: rgba(56,56,56,.45); }
.emb-chipf.off:hover { border-color: var(--c); color: var(--c); }

/* [20-10-2026 (8)] Las columnas, IGUALES a las del tablero: mismo ancho, mismo fondo,
   misma cinta con las esquinas de arriba redondeadas. Son el mismo producto mirado de
   otra manera, y si una tiene las esquinas cuadradas y la otra redondeadas se nota. */
.emb-est-board { display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden;
  gap: var(--emb-sep); padding: 10px; background: var(--emb-fondo); }
/* [20-10-2026 (9)] Las barras de desplazamiento, finas como las del tablero. Sin esto el
   navegador pone las suyas, gordas y grises, y las dos vistas no se parecen. Mismos
   valores que .emb-board y .emb-col-list, a propósito. */
.emb-est-board::-webkit-scrollbar { height: 6px; }
.emb-est-board::-webkit-scrollbar-track { background: #F8F8FA; }
.emb-est-board::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.14); border-radius: 10px; }
.emb-est-list::-webkit-scrollbar { width: 3px; }
.emb-est-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
.emb-est-col {
  display: flex; flex-direction: column;
  min-width: 270px; width: 270px; flex-shrink: 0;
  background: #F8F8FA;
  border-radius: var(--emb-radio);
  overflow: hidden;
  box-shadow: var(--emb-sombra);
  transition: background .2s, box-shadow .2s, transform .15s;
}
.emb-est-col:hover { transform: translateY(var(--emb-levante)); box-shadow: var(--emb-sombra-alta); }
.emb-est-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px 10px;
  background: var(--tono-suave, var(--emb-tinte, #fff));
  box-shadow: var(--emb-sombra-cinta);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 2;
}
/* Una sola línea siempre, como la cinta del tablero: si envuelve, esa columna crece y las
   demás quedan desparejas. */
.emb-est-name { font-size: 12px; font-weight: 700; font-family: 'Poppins', sans-serif;
  color: var(--tono-texto, var(--tono)); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* [20-10-2026 (10)] El interruptor de cada etapa, en su propia cabecera, y la columna
   replegada: lo mismo que hace el tablero con los embudos (.emb-col-check y
   .emb-col.apagada). Una etapa apagada se REPLIEGA, no se esconde: si desapareciera no
   quedaría desde dónde encenderla de nuevo. */
.emb-est-check {
  width: 17px; height: 17px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--tono, rgba(0,0,0,.18));
  background: #fff; color: #fff; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s;
}
.emb-est-check.on { background: var(--tono, #9961FF); border-color: var(--tono, #9961FF); }
.emb-est-check:hover { border-color: var(--tono, #9961FF); }

.emb-est-col.apagada { width: 46px; min-width: 46px; background: #fbfbfc; cursor: pointer; }
.emb-est-col.apagada .emb-est-list { display: none; }
.emb-est-col.apagada .emb-est-head {
  height: 100%; border-radius: 0; padding: 12px 0;
  flex-direction: column; justify-content: flex-start; gap: 10px;
}
.emb-est-col.apagada .emb-est-name,
.emb-est-col.apagada .emb-est-badge,
.emb-est-col.apagada .emb-est-todos { display: none; }
.emb-est-vert {
  display: none;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--tono, #9961FF);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 72%;
}
.emb-est-col.apagada .emb-est-vert { display: block; }

.emb-est-badge { font-size: 10px; font-weight: 700; background: var(--tono-chip, var(--emb-tinte));
  color: var(--tono-texto, var(--tono)); border-radius: 20px; padding: 2px 8px; flex-shrink: 0; }
.emb-est-list { flex: 1; min-height: 0; overflow-y: auto;
  padding: 10px 10px 16px; display: flex; flex-direction: column; gap: 8px; }

/* La tarjeta también: mismo borde, mismo radio y misma sombra que la del tablero. */
.emb-est-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px;
  padding: 12px 12px 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  position: relative; user-select: none;
  transition: box-shadow .2s, transform .15s; }
/* [21-10-2026] Al pasar el mouse se levanta, igual que en el tablero (.emb-card:hover).
   Faltaba: la transición ya estaba escrita y no había nada que la disparara, así que la
   misma tarjeta se movía en una vista y en la otra no. Mismos valores, a propósito. */
.emb-est-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); transform: translateY(-1px); }
.emb-est-top { display: flex; align-items: center; gap: 8px; }
.emb-est-ava { width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #9961FF, #5b8dee); color: #fff;
  font-size: 9.5px; font-weight: 800; position: relative;
  display: flex; align-items: center; justify-content: center; }
.emb-est-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  position: absolute; inset: 0; }
.emb-est-nom { font-size: 12.5px; font-weight: 700; color: #383838; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb-est-unread { background: #E2445C; color: #fff; border-radius: 9px; padding: 0 6px;
  font-size: 9.5px; font-weight: 800; flex-shrink: 0; }
.emb-est-fecha { font-size: 10px; color: #b4b4c0; flex-shrink: 0; }
.emb-est-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.emb-est-chip { font-size: 9.5px; font-weight: 700; border-radius: 20px; padding: 2px 7px;
  background: var(--sc); color: var(--st); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La pista de que la tarjeta NO es toda la persona. En gris: informa, no compite. */
.emb-est-otros { font-size: 9.5px; font-weight: 600; color: #c0c0cb; padding: 2px 4px;
  cursor: default; }
/* [20-10-2026 (8)] MARCAR Y MOVER en esta vista. El cuadradito, el sello de «sin
   confirmar» y la columna iluminada al arrastrar encima: los mismos gestos del tablero,
   para que una vista no se aprenda aparte de la otra. */
/* El tilde es .emb-card-check, el MISMO del tablero: un círculo en la esquina de la
   tarjeta. Acá solo se reserva el aire para que no se monte sobre el avatar. */
.emb-est-card { cursor: pointer; }
.emb-est-card.selected .emb-est-top { padding-left: 14px; }
/* [23-10-2026 (2)] La misma marcada del tablero: el look de la seleccionada del editor, sin anillo. */
.emb-est-card.selected { background: var(--hv-abierta-fondo); border: var(--hv-abierta-borde); box-shadow: var(--hv-abierta-sombra); }
.emb-est-card.arrastrando { opacity: .4; }
.emb-est-card.emb-fija { cursor: default; }
.emb-est-col.drag-over { background: rgba(153,97,255,.07); outline: 2.5px dashed #9961FF;
  outline-offset: -3px; }
/* [20-10-2026 (13)] Reordenar columnas: la cinta se arrastra y la columna de destino se
   marca. Mismos valores que .emb-col.col-drag-over del tablero: es el mismo gesto. */
.emb-est-col.col-drag-over { outline: 2.5px dashed #9961FF; outline-offset: -3px;
  background: rgba(153,97,255,0.05); }
.emb-est-head[draggable="true"]:active { cursor: grabbing; }

/* Marcar toda una etapa, en su cabecera */
.emb-est-todos { background: none; border: none; cursor: pointer; flex-shrink: 0;
  color: var(--tono-texto, rgba(56,56,56,0.3)); opacity: .55;
  font-size: 14px; padding: 2px 4px; transition: color .15s, opacity .15s; }
.emb-est-todos:hover { opacity: .85; }
.emb-est-todos.puestos { color: var(--tono-texto, #9961FF); opacity: 1; }
/* El avioncito de la cabecera, igual que .emb-col-msg del tablero. */
.emb-est-msg { background: none; border: none; cursor: pointer; flex-shrink: 0;
  color: var(--tono-texto, rgba(56,56,56,0.3)); opacity: .55;
  font-size: 14px; padding: 2px 4px; transition: color .15s, opacity .15s; }
.emb-est-msg:hover { opacity: 1; }
.emb-est-col.apagada .emb-est-msg { display: none; }
.emb-est-badge b { font-weight: 800; }

/* Las etapas del diálogo de lote */
.emb-lote-etapa {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--c); background: var(--cs); color: var(--c);
  border-radius: 20px; padding: 5px 12px; cursor: pointer; margin: 0 5px 6px 0;
  display: inline-flex; align-items: center; gap: 6px; transition: all .14s;
}
.emb-lote-etapa.on { background: var(--c); color: #fff; }
/* Una etapa que ninguno de los marcados puede tomar —su embudo no la tiene— se muestra
   apagada, nunca escondida: si desapareciera nadie entendería por qué falta. */
.emb-lote-etapa[disabled] { border-color: #e8e8ef; background: #fafafb; color: #c4c4ce;
  cursor: not-allowed; }
.emb-lote-cuantos { font-size: 9.5px; font-weight: 800; background: rgba(0,0,0,.07);
  border-radius: 10px; padding: 1px 6px; }

.emb-est-vacio { font-size: 11px; color: #c9c9d3; text-align: center; padding: 18px 6px; }
.emb-est-nada { padding: 40px 16px; text-align: center; font-size: 13px; color: #b8bed0; }

.emb-lista { display: none; background: #f4f4f8; flex: 1; overflow-y: auto; min-height: 0; }
/* [22-08 (2)] UN solo dueño del display: la clase la pone el JS, el CSS decide qué se
   ve. Sin esto, el JS escribía display en línea y se pisaba con la regla de arriba. */
.emb-modo-lista .emb-lista { display: block; }
.emb-modo-lista #emb-board { display: none !important; }

/* El boton que alterna tablero/lista, junto a los demas de la cabecera. */
/* [20-10-2026 (7)] .emb-btn-lista se retira: era el botón de dos estados que alternaba
   tablero y lista. Lo reemplaza el conmutador de tres (.emb-vistas), que vive junto al
   título y no al final de la barra de filtros. */

/* ── Nivel 1: los embudos, como tarjetas ── */
/* El aire entre tarjetas es lo que separa; por eso el contenedor lleva padding. */
.emb-lis-nivel1 { padding: 10px 11px; display: flex; flex-direction: column; gap: 9px; }
.emb-lis-emb {
  display: block; width: 100%; text-align: left; background: #fff;
  border: none; border-left: 3px solid var(--emb-cl, #9961FF);
  border-radius: 12px; padding: 12px 13px; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 1px 3px rgba(30,25,80,.08), 0 1px 2px rgba(30,25,80,.04);
  transition: box-shadow .15s, transform .15s;
}
/* Se levanta al pasar: dice "esto se puede tocar" sin agregar un icono mas. */
.emb-lis-emb:hover { box-shadow: 0 4px 12px rgba(30,25,80,.12); transform: translateY(-1px); }
.emb-lis-l1 { display: flex; align-items: center; gap: 10px; }
.emb-lis-ico { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px; }
.emb-lis-nom { font-size: 13.5px; font-weight: 700; color: #383838; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emb-lis-tot { font-size: 13px; font-weight: 800; color: #9961FF; }
.emb-lis-chev { font-size: 10px; color: #b8bed0; margin-left: 5px; }

/* Los circulos con su numero y el nombre de la etapa. Reemplazan a la barra de
   distribucion: dicen lo mismo y no hay que descifrarlos. */
.emb-lis-etq { display: flex; gap: 11px; margin-top: 8px; flex-wrap: wrap;
  font-size: 10.5px; color: #6b7194; }
.emb-lis-etq span { display: inline-flex; align-items: center; gap: 5px; }
.emb-lis-etq.vacio { color: #b8bed0; }
.emb-lis-pt { width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  flex-shrink: 0; }

/* ── Nivel 2: las etapas ── */
/* ── MARCAR EN LA VISTA LISTA  [20-10-2026] ────────────────────────────────── */
.emb-lis-chk {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,.18); background: #fff;
  color: #fff; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s;
}
.emb-lis-chk.on { background: #9961FF; border-color: #9961FF; }
.emb-lis-chk:hover { border-color: #9961FF; }
.emb-lis-ct.selected { background: #f5f0ff; }

/* El check de una etapa, al final de su encabezado */
.emb-lis-et-chk { margin-left: auto; }

/* La fila de «marcar todos los de este embudo», bajo el botón de volver */
.emb-lis-barra {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; background: #faf8ff;
  border-bottom: 1px solid #efeafd;
}
.emb-lis-todos {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #d8def0; border-radius: 14px;
  padding: 4px 11px 4px 5px; font-size: 11.5px; color: #5b6478;
  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .13s;
}
.emb-lis-todos:hover { border-color: #9961FF; }
.emb-lis-todos.on { background: #efeaff; border-color: #9961FF; color: #5a37c4; }
.emb-lis-todos b { font-weight: 800; color: #9961FF; }

/* [20-10-2026] La barra de selección vive pegada al borde izquierdo del contenido, y
   ese borde es el ancho del menú lateral. En pantalla angosta el menú no está, así que
   sin esto la barra arrancaba 176 px adentro y se salía por la derecha — justo en la
   vista lista, que es la de celular. */
@media (max-width: 860px) {
  .emb-select-bar, .emb-confirm-bar { left: 0; }
}

/* [21-10-2026 (6)] LA BARRA DE CONFIRMAR, EN DOS LÍNEAS EN EL TELÉFONO (lo vio Alberto:
   «prácticamente no se ve en el celular»). En una fila, el texto y los dos botones se
   apretaban hasta quedar ilegibles: «2 movimientos en espera de pasar a Alta» más dos
   botones no caben en 390 px. El aviso primero, los botones debajo y repartidos a mitad y
   mitad, con alto de dedo. Es la barra que frena un movimiento de 40 personas: si no se
   lee, no frena nada. */
@media (max-width: 560px) {
  .emb-confirm-bar {
    flex-direction: column; align-items: stretch; gap: 9px; padding: 11px 14px 13px;
  }
  .emb-confirm-bar > div { display: flex; gap: 8px; }
  .emb-confirm-bar > div > button { flex: 1; justify-content: center; min-height: 40px; }
  .emb-confirm-txt { font-size: 13px; line-height: 1.35; }
}

/* [20-10-2026 (7)] LA BARRA SUPERIOR, EN DOS LÍNEAS EN PANTALLA ANGOSTA. Sin partir, la
   barra cabe de 492 px para arriba y por debajo se desborda — medido en el navegador,
   ancho por ancho, con el conmutador puesto. A 430 px ya se desbordaba HOY, antes de
   agregar nada. El corte va en 560 y no en 492 por dos razones: deja un colchón sobre el
   límite exacto, y en el panel real el módulo puede ser más angosto que la ventana. No
   más arriba, para no partir la barra en tablets donde entra entera.
   El buscador es lo único elástico de la segunda fila y cede el ancho que sobra; sin
   min-width:0 un hijo flex no baja de su contenido y no cedería nada. */
/* [21-10-2026] El NOMBRE de la vista es de escritorio y se va bajo 768: medido, con él
   puesto la barra necesita 650 px para no partirse. El control de TAMAÑO se queda en todos
   los anchos (Alberto, 21-10): en una ventana angosta es justo cuando más falta hace poder
   acomodar el tablero a un porcentaje. */
@media (max-width: 767px) {
  .emb-vista-nom { display: none; }
  .emb-vista-btn.on { width: 32px; padding: 0; }
}

/* [21-10-2026] El corte sube de 560 a 640. Con el control de tamaño siempre puesto, la
   barra entera necesita 594 px medidos —antes 492—, así que entre 561 y 593 se desbordaba
   en vez de partirse. 640 deja 46 px de holgura y sigue lejos de los 768 de una tablet,
   donde la barra entra entera y partirla sería peor. */
@media (max-width: 640px) {
  .emb-topbar { flex-wrap: wrap; }
  .emb-topbar-right { width: 100%; justify-content: flex-start; }
  .emb-topbar-right .emb-search-wrap { flex: 1; min-width: 0; }
  .emb-topbar-right .emb-search-box  { flex: 1; min-width: 0; }
  .emb-topbar-right .emb-search-input { min-width: 0; }
}

.emb-lis-volver {
  position: sticky; top: 0; z-index: 3; width: 100%; display: flex; align-items: center;
  gap: 9px; padding: 11px 14px; background: #fff; border: none;
  border-bottom: 1px solid #f0f0f5; font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700; color: #383838; cursor: pointer; text-align: left;
}
.emb-lis-volver:hover { background: #faf8ff; color: #9961FF; }
.emb-lis-volver span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }

/* El encabezado de etapa se queda pegado: al recorrer una lista larga hay que saber
   siempre en que etapa se esta. */
.emb-lis-et-hd { position: sticky; top: 43px; z-index: 2; background: #faf8ff;
  padding: 8px 14px 5px; border-bottom: 1px solid #f0f0f5;
  display: flex; align-items: center; gap: 8px; }
.emb-lis-et-pt { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.emb-lis-et-nom { font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #6b7194; }
.emb-lis-et-n { margin-left: auto; font-size: 10px; color: #b8bed0; }
.emb-lis-et-vacia { padding: 9px 14px 12px 56px; font-size: 10.5px; color: #b8bed0;
  background: #fff; border-bottom: 1px solid #f7f7fa; }

.emb-lis-ct { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #fff; border-bottom: 1px solid #f7f7fa; }
.emb-lis-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #9961FF, #5b8dee); color: #fff; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; overflow: visible; }
.emb-lis-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.emb-lis-canal { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; border: 2px solid #fff; background: #25D366; }
.emb-lis-canal.instagram { background: #E1306C; }
.emb-lis-canal.messenger { background: #0084FF; }
/* [20-10-2026 (5)] En la lista el punto no lleva icono dentro, así que el logo va como
   fondo. La ruta es relativa a ESTE archivo (assets/css/), no a la página. */
.emb-lis-canal.heavensy  { background: #fff url('../img/logochico.png') center/cover no-repeat; }
.emb-lis-ct-nom { font-size: 12.5px; font-weight: 700; color: #383838;
  display: flex; align-items: center; gap: 6px; }
.emb-lis-ct-sub { font-size: 11px; color: #6b7194; margin-top: 1px; }
.emb-lis-unread { background: #E2445C; color: #fff; border-radius: 9px; padding: 0 6px;
  font-size: 9.5px; font-weight: 800; }
.emb-lis-vacio { padding: 40px 16px; text-align: center; font-size: 13px; color: #b8bed0; }

/* Las dos acciones sobre un contacto, juntas: cambiar de etapa y mover de embudo. */
.emb-lis-acc { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.emb-lis-mover {
  width: 26px; height: 26px; border: 1px solid #e4e9f5; border-radius: 7px;
  background: #fff; color: #6b7194; cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.emb-lis-mover:hover { border-color: #9961FF; color: #9961FF; background: #faf8ff; }

/* En el telefono cada px cuenta. */
@media (max-width: 768px) {
  .emb-lis-emb { padding: 11px 12px; }
  .emb-lis-ct { padding: 10px 12px; }
  .emb-lis-et-vacia { padding-left: 52px; }
}

/* [22-08 (5)] Los filtros son CONTROLES y el listado es contenido: sin una separacion,
   el primer embudo parece parte de la barra. Sutil a proposito — una linea marcada
   partiria la pantalla en dos. */
.emb-filter-bar, .emb-prof-bar {
  border-bottom: 1px solid #ebe9f2;
  box-shadow: 0 1px 0 rgba(30,25,80,.03);
}

/* ── ARRASTRE EN LA LISTA  [22-08-2026 (6)] ─────────────────────────────────
   Mismo mecanismo del tablero (_embDragging), otras zonas donde soltar. */
.emb-lis-asa { color: #d8d8e4; font-size: 12px; flex-shrink: 0; cursor: grab; }
.emb-lis-ct { cursor: grab; user-select: none; -webkit-user-select: none; }
.emb-lis-ct:active { cursor: grabbing; }
.emb-lis-ct.arrastrando { opacity: .4; }

/* La copia que sigue al dedo en tactil: sin ella no se ve que se esta moviendo. */
.emb-lis-fantasma {
  position: fixed; z-index: 9999; pointer-events: none; opacity: .95;
  transform: translate(-50%, -50%) rotate(1.5deg);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(30,25,80,.22);
  background: #fff;
}

/* La etapa que recibe. Se marca fuerte: soltar en el lugar equivocado mueve a una
   persona sin querer, y deshacerlo son varios pasos. */
.emb-lis-et-hd.drag-over {
  background: #efe6ff;
  box-shadow: inset 0 -2px 0 #9961FF;
}
/* [22-08 (12)] Toda la seccion de la etapa se tine: es la zona real de destino, y con el
   encabezado pegado arriba marcarlo solo a el no dice donde va a caer la tarjeta. */
.emb-lis-ct.en-zona, .emb-lis-et-vacia.en-zona { background: #faf7ff; }
.emb-lis-ct.en-zona { box-shadow: inset 3px 0 0 #d9c9ff; }
.emb-lis-volver.drag-over {
  background: #f5f0ff; color: #9961FF;
  border-bottom: 2px dashed #9961FF;
}

/* La hoja de embudos destino, al arrastrar hacia arriba. */
.emb-lis-destinos {
  position: absolute; left: 0; right: 0; top: 0; z-index: 20;
  background: #fff; border-radius: 0 0 14px 14px; padding: 8px 0 10px;
  box-shadow: 0 8px 24px rgba(30,25,80,.18);
}
.emb-lis-destinos-t {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: #b8bed0;
  padding: 4px 14px 7px;
}
.emb-lis-destino {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  font-size: 12.5px; font-weight: 600; color: #383838; cursor: pointer;
}
.emb-lis-destino.drag-over { background: #f5f0ff; color: #9961FF; }

/* El contenedor necesita ser el ancla de la hoja. */
.emb-lista { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLTIPS DEL MODULO  [22-08-2026]
   Blanco, con titulo arriba y explicacion debajo. El atributo es data-emb-tip y NO
   data-tip: ese ultimo lo pinta un selector GLOBAL de configuracion.css
   ([data-tip]:hover::after, el tooltip negro) que se carga en toda la pagina, asi que
   usar ese nombre mostraba los dos a la vez. Ese fue el bug.
   Hermano de .cal-pay-tip (calendario.css): copia consciente — cada modulo con sus
   archivos. Si cambia uno, mirar el otro.
   ═══════════════════════════════════════════════════════════════════════════ */
.emb-tip {
  display: none; position: fixed; z-index: 10000;
  background: #fff; border: 1px solid #f0edfa; border-radius: 10px;
  padding: 9px 11px; width: max-content; max-width: 186px;
  box-shadow: 0 8px 26px rgba(30,25,80,.14);
  font-family: 'DM Sans', sans-serif; pointer-events: none;
}
.emb-tip-ttl { font-size: 9.5px; letter-spacing: .06em; color: #b8bed0;
  margin-bottom: 6px; font-weight: 700; }
.emb-tip-txt { font-size: 11.5px; color: #383838; line-height: 1.42; }

.emb-filter-dias { display: flex; flex-wrap: wrap; gap: 5px; }
.emb-dia-chip {
  border: 1px solid #d8def0; border-radius: 14px; padding: 4px 10px;
  font-size: 11px; color: #5b6478; cursor: pointer; transition: all .13s;
  font-family: 'DM Sans', sans-serif;
}
.emb-dia-chip:hover { border-color: #9961FF; }
.emb-dia-chip.on { background: #efeaff; border-color: #9961FF; color: #5a37c4; font-weight: 600; }

/* [22-08 (7)] Aviso de embudos ocultos por el filtro de vacios. Discreto pero presente:
   informa sin competir con el contenido. */
.emb-aviso-vacios {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; background: #f5f0ff; color: #6b4bab;
  font-size: 11px; border-bottom: 1px solid #e9e2fb;
}
.emb-aviso-vacios i { opacity: .75; }
.emb-aviso-vacios span { flex: 1; }
.emb-aviso-vacios b { cursor: pointer; text-decoration: underline; font-weight: 700; }
.emb-aviso-vacios b:hover { color: #9961FF; }

/* [22-08 (8)] El boton de ocultar vacios comparte .emb-filter-btn con sus hermanos —asi
   hereda tamano, borde y radio de una sola fuente— y aqui solo se ajusta el color del
   icono: sin esto salia negro, mas oscuro que el resto de la barra. */
.emb-vacios-btn { color: #6b7194; }
.emb-vacios-btn:hover { color: #9961FF; }
.emb-vacios-btn.active { background: #f5f0ff; border-color: #9961FF; color: #9961FF; }

/* ══ [10-09] LO QUE EL PLAN NO PERMITE ══════════════════════════════════════
   El candado y su globo son de todo el sitio (hvy-permisos.css). Aquí solo lo
   propio del tablero. */

/* La tarjeta y la columna que no se pueden mover. El arrastre se impide en el JS
   (nacen sin draggable); esto es que se note ANTES de intentarlo. */
.emb-card.emb-fija,
.emb-col-head.emb-fija { cursor: default; }
.emb-card.emb-fija:hover { box-shadow: 0 1px 4px rgba(30, 45, 90, .05); }

/* El candadito aparece al pasar el mouse: mientras no vayas a moverla, no molesta. */
.emb-card.emb-fija::after {
  content: "\f023";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  position: absolute;
  bottom: 10px;
  right: 11px;
  font-size: 9px;
  color: #c9b8ff;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.emb-card.emb-fija:hover::after { opacity: 1; }

/* El aviso de arriba: explica UNA vez lo que si no habría que repetir en cada tarjeta. */
.emb-aviso {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 16px 0;
  padding: 9px 13px;
  background: #fff;
  border: 1px solid #e0d5ff;
  border-left: 3px solid #9961FF;
  border-radius: 0 9px 9px 0;
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.45;
}
.emb-aviso i { color: #b7791f; font-size: 12px; flex: none; }
.emb-aviso b { color: #1e2d5a; }

/* El módulo entero fuera del plan: se muestra qué es y desde dónde se consigue. */
.emb-sin-plan {
  flex: 1;
  padding: 56px 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 12.5px;
  line-height: 1.6;
}
.emb-sin-plan i { font-size: 26px; color: #e0e7ff; margin-bottom: 11px; display: block; }
.emb-sin-plan b { color: #6b7280; display: block; margin-bottom: 4px; font-size: 13.5px; }
.emb-sin-plan span { display: block; max-width: 420px; margin: 0 auto; }

/* El tablero del profesional que aún no tiene clientes: es lo normal, no un error. */
.emb-empty-propio { line-height: 1.55; }
.emb-empty-propio b { display: block; color: #6b7280; font-size: 12px; margin: 6px 0 2px; }
.emb-empty-propio span { display: block; font-size: 10.5px; color: #b9b9c8; }

/* [08-10-2026] «Todo el equipo» con candado: el globo hacia la derecha, para que el borde del tablero no lo corte. */
#emb-prof-bar .emb-prof-cand .hvy-candado-globo { left: 0; right: auto; }
#emb-prof-bar .emb-prof-cand .hvy-candado-globo::before { left: 16px; right: auto; }
/* [20-10-2026 (12)] ADMINISTRAR ETAPAS, dentro del panel del lápiz. Reusa .emb-edit-row y
   sus hermanas —es la misma lista con otro contenido— y solo agrega lo propio: el campo
   de renombrar en la fila, la etiqueta de las que creó la empresa y el alta de abajo. */
.emb-etapa-ed {
  width: 100%; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  border: 1.5px solid #9961FF; border-radius: 7px; padding: 3px 7px; outline: none;
}
/* Distingue las que agregó la empresa de las que vienen del rubro. Las dos se renombran
   igual; esto solo dice de dónde salió cada una. */
.emb-etapa-mia {
  font-size: 8.5px; font-weight: 800; letter-spacing: .05em; color: #9961FF;
  background: rgba(153,97,255,.12); border-radius: 20px; padding: 1px 6px; flex-shrink: 0;
}
.emb-etapa-alta { display: none; gap: 6px; margin-top: 8px; }
.emb-etapa-alta.open { display: flex; }
.emb-etapa-alta .emb-nuevo-input { flex: 1; min-width: 0; margin: 0; }
.emb-etapa-ok {
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer;
  background: #9961FF; color: #fff; flex-shrink: 0;
}
.emb-etapa-ok:hover { background: #8449f5; }

/* [20-10-2026 (14)] La copia que sigue al dedo al arrastrar una tarjeta en táctil. Mismos
   valores que .emb-lis-fantasma de la vista lista: es el mismo gesto en otra vista. */
.emb-est-fantasma {
  position: fixed; z-index: 9999; pointer-events: none; opacity: .95;
  transform: translate(-50%, -50%) rotate(1.5deg);
  border-radius: 14px; box-shadow: 0 8px 24px rgba(30,25,80,.22);
  background: #fff; margin: 0;
}

/* [21-10-2026] Borrar una etapa. El botón de confirmar va en rojo —no en el violeta de
   .emb-btn-new— porque borrar no es lo mismo que guardar y el color tiene que decirlo. */
.emb-btn-del {
  background: #E2445C; color: #fff; border: none; border-radius: 9px;
  padding: 8px 16px; font-family: 'DM Sans', sans-serif; font-size: 13px;
  font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.emb-btn-del:hover { opacity: .88; }
.emb-btn-del:disabled { opacity: .45; cursor: not-allowed; }
/* La papelera de cada fila del editor: la misma de .emb-edit-row-del del tablero. */
.emb-est-borrar { background: none; border: none; cursor: pointer; flex-shrink: 0;
  color: rgba(220,38,38,0.4); font-size: 13px; padding: 4px; transition: color .15s; }
.emb-est-borrar:hover { color: #dc2626; }

/* ═══ [23-10-2026 (3)] LA TARJETA ÚNICA EN EMBUDOS ═══════════════════════════════════════════
   .emb-card y .emb-est-card nacen como .hv-card (hv-tarjeta.css): el look —fondo, borde, radio, sombra,
   hover, marcada— es el del editor. Acá solo lo que Embudos suma sobre esa base. Las reglas van con
   .hv-card para ganarle a las de arriba, que se quedan para el placeholder del arrastre. */
.emb-card.hv-card, .emb-est-card.hv-card {
  background: var(--hv-fondo); border: var(--hv-borde); border-radius: var(--hv-radio);
  box-shadow: var(--hv-sombra); padding: 10px 12px 10px; cursor: grab; }
.emb-card.hv-card.emb-fija, .emb-est-card.hv-card.emb-fija { cursor: default; }
.emb-card.hv-card:hover, .emb-est-card.hv-card:hover {
  background: var(--hv-hover-fondo); border-color: var(--hv-hover-borde);
  box-shadow: var(--hv-hover-sombra); transform: translateY(var(--hv-hover-levanta)); }
.emb-card.hv-card.selected, .emb-card.hv-card.selected:hover,
.emb-est-card.hv-card.selected, .emb-est-card.hv-card.selected:hover {
  background: var(--hv-abierta-fondo); border: var(--hv-abierta-borde); box-shadow: var(--hv-abierta-sombra); }
.emb-card.hv-card.dragging { opacity: .45; cursor: grabbing; transform: scale(.97); }
.emb-est-card.hv-card.arrastrando { opacity: .4; }
/* Las listas ya separan con gap: la tarjeta no suma su margen. */
.emb-col-list .hv-card + .hv-card, .emb-est-list .hv-card + .hv-card { margin-top: 0; }
/* El botón de mover va en la derecha de la tarjeta (bajo los no leídos), no flotando en la esquina. */
.hv-card .emb-card-move { position: static; top: auto; right: auto; width: auto; height: 18px; }
/* La etapa y la hora en el pie: la etapa a la izquierda, la hora a la derecha (lo hace .hv-pie). */
.hv-card .emb-stage-wrap { min-width: 0; }

/* [25-10-2026] El panel de filtros unido: Solo VIP y «Limpiar filtros» en la fila CLIENTE. */
.emb-filtros-flot .emb-filter-dias { flex-wrap: nowrap; }
/* Las etiquetas de las filas del mismo ancho: los chips de todas parten en la misma columna. */
.emb-filtros-flot .emb-chipbar-et, .emb-filtros-flot #emb-prof-bar > span:first-child { width: 74px; flex-shrink: 0; }
.emb-vip-chip { display: inline-flex; align-items: center; gap: 5px; background: #fff; }
.emb-vip-chip i { color: #9961FF; }
.emb-filtros-limpiar { margin-left: auto; border: none; background: none; cursor: pointer; font-family: 'DM Sans', sans-serif;
  font-size: 11.5px; color: #dc2626; display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px; flex-shrink: 0; }
.emb-filtros-limpiar:hover { text-decoration: underline; }

/* [28-10-2026] EMBUDOS EN EL CELULAR (Alberto, 28-10: «filtros de embudos no se ven bien»). A 390px la segunda fila de la
   barra se salía por la derecha (el buscador quedaba en 23px y el ojo y el lápiz, fuera) y en el panel «Filtros» los
   chips se cortaban: la columna de nombres (74px) más chips sin bajar de línea no caben. */
@media (max-width: 640px) {
  .emb-topbar-right { flex-wrap: wrap; row-gap: 8px; }
  .emb-topbar-right .emb-search-wrap { order: -1; flex: 1 1 100%; max-width: none; }
  .emb-filtros-flot { max-height: calc(100dvh - 190px); overflow-y: auto; overscroll-behavior: contain; }
  .emb-filtros-flot .emb-chipbar,
  .emb-filtros-flot #emb-prof-bar { flex-wrap: wrap; overflow: visible; row-gap: 6px; padding: 6px 14px 8px !important; }
  .emb-filtros-flot .emb-chipbar-et,
  .emb-filtros-flot #emb-prof-bar > span:first-child { width: 100%; margin-bottom: -1px; }
  .emb-filtros-flot .emb-filter-dias { flex-wrap: wrap; }
  .emb-filtros-flot .emb-dia-chip, .emb-filtros-flot .emb-chipf { white-space: nowrap; }
  .emb-filtros-flot .emb-dia-chip { padding: 6px 12px; font-size: 12px; }
}