/* ── BITÁCORA ──
   [v2026.10.27-1] emb-ayuda.css
   2026-10-27 | − .emb-ayuda-btn: la ayuda es el «?» junto al título «Embudos» (la clase común .hvy-ayuda-mini--titulo;
     embudos.html [v2026.10.27-1]).
   [v2026.10.25-1] emb-ayuda.css
   2026-10-25 | NUEVO. Los ejemplos de la ayuda de Embudos (emb-ayuda-ejemplos.js [v2026.10.25-1]) y el botón «Ayuda» de la
     barra de arriba (#embAyudaBtn). Lo común del panel está en hvy-ayuda.css; la tarjeta de los ejemplos es la de verdad
     (hv-tarjeta.css y embudos.css).
───────────────────────────────────────────────────────── */
#emb-edit-panel .hvy-ayuda-mini { vertical-align: middle; }

/* Piezas de los ejemplos */
.eay-tablero { display: flex; gap: 8px; overflow-x: auto; padding: 6px; background: #f4f4f8; border-radius: 12px; }
.eay-col { flex: 1 0 180px; min-width: 0; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(30,25,80,.08); overflow: hidden; }
.eay-col-cab { display: flex; align-items: center; gap: 6px; padding: 7px 9px; background: color-mix(in srgb, var(--tono, #9961FF) 16%, #fff);
  font-size: 11.5px; color: #1f2937; }
.eay-col-cab b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eay-check { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--tono, #9961FF); display: inline-flex; align-items: center;
  justify-content: center; font-size: 8px; color: #fff; flex-shrink: 0; }
.eay-check.on { background: var(--tono, #9961FF); }
.eay-badge { font-size: 10.5px; font-weight: 700; color: var(--tono, #9961FF); background: rgba(255,255,255,.7); border-radius: 10px; padding: 1px 7px; }
.eay-cab-ic { font-size: 11px; color: var(--tono, #9961FF); opacity: .8; }
.eay-col-lista { display: flex; flex-direction: column; gap: 6px; padding: 7px; min-height: 50px; }
.eay-col-lista .hv-card, .eay-lista-v .hv-card { cursor: default; }
.eay-lista-v { display: flex; flex-direction: column; gap: 6px; }
.eay-cuenta { margin-top: 6px; font-size: 10.5px; color: #6b7280; }
.eay-ph { height: 4px; border-radius: 3px; background: #9961FF; margin: 2px 0; }
.eay-mini-card { display: flex; gap: 8px; align-items: flex-start; padding: 7px; border-radius: 10px; border: 1px solid #eef0f6; background: #fff;
  font-size: 11.5px; color: #1f2937; }
.eay-av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #a5b4fc, #818cf8); color: #fff; font-size: 10px;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.eay-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.eay-svc { font-size: 9.5px; font-weight: 600; color: var(--c); border: 1px solid var(--c); border-radius: 8px; padding: 0 6px; }
.eay-otros { font-size: 9.5px; color: #6b7280; border: 1px dashed #c7cbe0; border-radius: 8px; padding: 0 6px; }

/* Mapa */
.eay-mapa { display: grid; grid-template-columns: 1fr 1fr 1fr 0.8fr; grid-template-rows: 34px 1fr; gap: 6px; height: 160px; }
.eay-mapa-z { border: 1px dashed #c4b5fd; border-radius: 10px; background: #faf8ff; color: #4c1d95; font-family: inherit; font-weight: 600;
  font-size: 11px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.eay-mapa-z:hover { background: #f3efff; border-style: solid; }
.eay-m-tablero { grid-column: 1 / 5; flex-direction: column; }
.eay-mapa-n { width: 18px; height: 18px; border-radius: 50%; background: #8b5cf6; color: #fff; font-size: 10px; display: inline-flex;
  align-items: center; justify-content: center; }

/* Lista */
.eay-lis { display: flex; flex-direction: column; gap: 6px; }
.eay-lis-emb { text-align: left; border: 1px solid #eef0f6; border-left: 3px solid var(--c); border-radius: 10px; background: #fff; padding: 8px 10px;
  font-family: inherit; cursor: pointer; }
.eay-lis-emb:hover { background: #faf8ff; }
.eay-lis-l1 { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #1f2937; }
.eay-lis-l1 b { flex: 1; } .eay-lis-l1 > i:first-child { color: var(--c); } .eay-lis-l1 span { color: #9961FF; font-weight: 700; }
.eay-lis-etq { display: flex; gap: 10px; margin-top: 4px; font-size: 10.5px; color: #6b7280; }
.eay-lis-etq i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }
.eay-lis-volver { align-self: flex-start; border: none; background: none; font-family: inherit; font-weight: 700; font-size: 12px; color: #4c1d95;
  cursor: pointer; display: inline-flex; gap: 6px; align-items: center; padding: 2px 0; }
.eay-lis-et { font-size: 11px; font-weight: 700; color: #374151; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.eay-lis-et i { width: 8px; height: 8px; border-radius: 50%; } .eay-lis-et span { color: #9ca3af; font-weight: 600; }
.eay-lis-ct { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #eef0f6; border-radius: 9px; background: #fff;
  font-size: 11.5px; }
.eay-lis-ct > i { color: #c7cbe0; } .eay-lis-ct b { flex: 1; }
.eay-etq { font-size: 10px; font-weight: 600; color: #7c3aed; background: #f3efff; border-radius: 8px; padding: 1px 7px; }

/* Filtros */
.eay-flot { border: 1px solid #eef0f6; border-radius: 12px; padding: 6px 0; margin-bottom: 8px; background: #fff; }
.eay-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 10px; }
.eay-et { font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #b4b4c0; text-transform: uppercase; width: 64px; }

/* Etapa: el desplegable del ejemplo */
.eay-opciones { position: relative; min-height: 6px; }
.eay-drop { display: inline-flex; flex-direction: column; margin-top: 4px; background: #fff; border: 1px solid #eef0f6; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(30,25,80,.12); padding: 4px; }
.eay-drop .emb-stage-option { cursor: default; }

/* Modales de ejemplo */
.eay-modal { border: 1px solid #eef0f6; border-radius: 12px; background: #fff; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.eay-modal-tit { font-weight: 700; font-size: 12.5px; color: #1f2937; }
.eay-modal .emb-move-row { cursor: default; }
.eay-ya { opacity: .55; }
.eay-para { font-size: 11px; color: #6b7280; }
.eay-texto { font-size: 12px; color: #374151; background: #f8f9fb; border: 1px solid #eef0f6; border-radius: 9px; padding: 8px; }
.eay-bt { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 8px;
  border: 1px solid #ddd6fe; color: #7c3aed; background: #fff; align-self: flex-start; }
.eay-bt-ok { background: #9961FF; border-color: #9961FF; color: #fff; }
.eay-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 12px;
  background: #fff; border: 1px solid #ddd6fe; box-shadow: 0 6px 18px rgba(30,25,80,.10); font-size: 11px; color: #374151; }
.eay-admin .emb-nuevo-btn { cursor: default; }
.eay-adm-fila { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #f3f4f6; font-size: 12px; }
.eay-adm-fila b { flex: 1; font-weight: 600; color: #1f2937; } .eay-adm-fila small { color: #9ca3af; font-size: 10.5px; }
.eay-adm-ic { color: #9ca3af; font-size: 11px; }
.eay-propia { font-size: 8.5px; font-weight: 800; color: #7c3aed; background: #f3efff; border-radius: 6px; padding: 1px 5px; }

/* Permisos */
.eay-perm { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; border-radius: 9px; border: 1px solid #e5e7eb;
  background: #fff; color: #6b7280; font-size: 11px; }
.eay-candado { color: #f59e0b; }