/* ── BITÁCORA ──
   [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 ── */

.emb-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #F8F8FA;
  overflow: hidden;
  width: calc(100% + 16px);
  margin: 0 -8px;
}

/* 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; }
.emb-topbar-right { display: flex; align-items: center; gap: 8px; }
.emb-topbar-title { font-size: 15px; font-weight: 700; color: #383838; font-family: 'Poppins', sans-serif; }

.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 */
.emb-board {
  display: flex;
  gap: 0;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
}
.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;
  border-right: 1px solid rgba(0,0,0,0.07);
  background: #F8F8FA;
  transition: background .2s;
}
.emb-col:last-child { border-right: none; }
.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: 12px 14px 10px;
  background: #fff;
  border-bottom: 2px solid rgba(0,0,0,0.07);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 2;
}
.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;
}
.emb-col-badge {
  font-size: 10px; font-weight: 700;
  background: rgba(153,97,255,0.1); color: #9961FF;
  border-radius: 20px; padding: 2px 8px; flex-shrink: 0;
}
.emb-col-add, .emb-col-msg {
  background: none; border: none; cursor: pointer;
  color: rgba(56,56,56,0.3); font-size: 14px; padding: 2px 4px;
  transition: color .15s; flex-shrink: 0;
}
.emb-col-add:hover { color: #9961FF; }
.emb-col-msg:hover { color: #5b8dee; }

/* 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-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; }
.emb-canal-dot.heavensy  { background: #9961FF; }

.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; }
.emb-tag-canal-instagram { background: rgba(214,36,159,0.1);  color: #d6249f; }
.emb-tag-canal-messenger { background: rgba(0,132,255,0.1);   color: #0084FF; }
.emb-tag-canal-heavensy  { background: rgba(153,97,255,0.1);  color: #9961FF; }

/* SELECCIÓN */
.emb-card.selected { box-shadow: 0 0 0 2.5px #9961FF, 0 4px 14px rgba(153,97,255,0.2); }
.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; }

/* 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; }

/* Botón adjuntar */
.emb-attach-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px dashed rgba(153,97,255,0.35);
  border-radius: 8px; padding: 8px 14px;
  font-size: 12px; font-weight: 600; color: #9961FF;
  cursor: pointer; font-family: 'DM Sans',sans-serif;
  transition: all .15s; width: 100%; box-sizing: border-box; justify-content: center;
}
.emb-attach-btn:hover { background: #f5f0ff; border-color: #9961FF; }

/* Chips destinatarios */
.emb-dest-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f5f0ff; border: 1px solid rgba(153,97,255,0.25);
  border-radius: 20px; padding: 3px 6px 3px 10px;
  font-size: 11px; font-weight: 600; color: #9961FF;
}
.emb-dest-x {
  background: none; border: none; cursor: pointer;
  color: rgba(153,97,255,0.5); font-size: 13px; line-height: 1;
  padding: 0 2px; font-weight: 400; transition: color .15s;
}
.emb-dest-x:hover { color: #dc2626; }

/* Selector canal */
.emb-canal-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
  border: 1.5px solid rgba(0,0,0,0.12); background: #fff; color: rgba(56,56,56,0.55);
  cursor: pointer; font-family: 'DM Sans',sans-serif; transition: all .15s; flex: 1; justify-content: center;
}
.emb-canal-btn.active { border-color: #9961FF; background: #f5f0ff; color: #9961FF; }
.emb-canal-btn:hover:not(.active) { background: #fafafa; color: #383838; }

/* [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;
}

/* 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); }
.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.
   ═══════════════════════════════════════════════════════════════════════════ */
.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. */
.emb-btn-lista {
  width: 34px; height: 34px; border: 1px solid #e4e9f5; border-radius: 9px;
  background: #fff; color: #6b7194; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  transition: all .15s;
}
.emb-btn-lista:hover { border-color: #9961FF; color: #9961FF; }
.emb-btn-lista.activo { background: #f5f0ff; border-color: #9961FF; color: #9961FF; }

/* ── 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 ── */
.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; }
.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: 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; }

/* [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; }