/* Helix · panel v5 · embudo: todo cuelga de html.hx-v5 (plan: docs/plans/panel-v5-fd90).
   Piel del tablero de helix-embudo.js con el aspecto del prototipo (gen.py: .kcol, .kh, .kc, .dock,
   capas v5, v9 y v11). El marcado extra (título, aro, grados, dock) lo añade helix-v5-embudo.js. La
   maquetación va dentro de @media (min-width: 1024px): el móvil v5 se diseña aparte. */

/* Colores de etapa (punto de la cabecera): los del prototipo. Descartados, discreto. */
html.hx-v5 .helix-app .hx-col { --hx5-dot: #8E8E93; }
html.hx-v5 .helix-app .hx-col[data-etapa="hablando"] { --hx5-dot: #0A84FF; }
html.hx-v5 .helix-app .hx-col[data-etapa="calientes"] { --hx5-dot: #FF6B35; }
html.hx-v5 .helix-app .hx-col[data-etapa="agendados"] { --hx5-dot: #B84BFF; }
html.hx-v5 .helix-app .hx-col[data-etapa="clientes"] { --hx5-dot: #34C759; }
html.hx-v5 .helix-app .hx-col[data-etapa="perdidos"] { --hx5-dot: color-mix(in srgb, #FF453A 55%, #8E8E93); }

/* Filtrar y Ordenar (helix-v5-embudo.js): lo que el filtro deja fuera y los componentes de las opciones, que comparten el
   menú del dock de escritorio y la hoja del móvil (solo existen cuando v5 los pinta, así que no tocan el panel de siempre). */
html.hx-v5 .helix-app .hx-board .hx-card[hidden] { display: none; }
html.hx-v5 .helix-app .hx5-menu-g { display: flex; flex-direction: column; gap: 7px; }
html.hx-v5 .helix-app .hx5-menu-g > b { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--v5-t2); }
html.hx-v5 .helix-app .hx5-menu-g > small { font-size: 11.5px; line-height: 1.35; color: var(--v5-t3); }
html.hx-v5 .helix-app .hx5-menu-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--v5-line); }
html.hx-v5 .helix-app .hx5-menu-seg button { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--v5-t1);
  font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .25s var(--v5-eo), color .25s var(--v5-eo); }
html.hx-v5 .helix-app .hx5-menu-seg button.on { background: var(--v5-acc); color: #fff; font-weight: 600; box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--v5-acc) 80%, transparent); }
html.hx-v5 .helix-app .hx5-menu-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 0 2px;
  border: 0; background: transparent; color: var(--v5-t1); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
html.hx-v5 .helix-app .hx5-sw { position: relative; flex: none; width: 42px; height: 26px; border-radius: 999px; background: var(--v5-track); transition: background .25s var(--v5-eo); }
html.hx-v5 .helix-app .hx5-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .25s var(--v5-eo); }
html.hx-v5 .helix-app .hx5-sw.on { background: var(--v5-acc); }
html.hx-v5 .helix-app .hx5-sw.on::after { transform: translateX(16px); }
html.hx-v5 .helix-app .hx5-menu-quitar { align-self: flex-start; padding: 4px 2px; border: 0; background: transparent; color: var(--accent-soft);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

@media (min-width: 1024px) {
  /* ── Panel: el tablero ocupa la hoja entera (sin el margen de las pantallas de siempre) ── */
  html.hx-v5 .helix-app .helix-tab-pane.is-active[data-tab="embudo"]:has(> .hx-board) { padding: 0; overflow: hidden; }
  html.hx-v5 .helix-app .hx-board { position: relative; height: 100%; padding: 0 14px 14px; }

  /* ── Cabecera: «Embudo» 28/700 y el subtítulo con los números reales ── */
  html.hx-v5 .helix-app .hx-board-bar { flex: none; flex-direction: column; align-items: flex-start; gap: 0; flex-wrap: nowrap; padding: 22px 14px 17px; }
  html.hx-v5 .helix-app .hx-board .hx5-h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx-board-total { margin-top: 3px; font-size: 13.5px; color: var(--v5-t2); cursor: default; }
  html.hx-v5 .helix-app .hx-board-total strong { font-weight: inherit; color: inherit; }
  html.hx-v5 .helix-app .hx-board-hint { display: none; }

  /* ── Columnas: fondo --v5-col, radio 22, cabecera con punto y contador en píldora ── */
  html.hx-v5 .helix-app .hx-board-cols { gap: 12px; padding: 0; scroll-snap-type: none; }
  html.hx-v5 .helix-app .hx-board .hx-col { flex: 1 1 0; min-width: 168px; max-height: 100%; padding: 10px 0 0; border: 0; border-radius: 22px;
    background: var(--v5-col); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: opacity .2s var(--v5-eo), box-shadow .25s var(--v5-eo), background .35s var(--v5-eo), flex-basis .45s var(--v5-eo); }
  html.hx-v5 .helix-app .hx-col-head { display: flex; align-items: center; gap: 8px; padding: 4px 16px 6px; border: 0; }
  html.hx-v5 .helix-app .hx-col-head::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--hx5-dot); }
  html.hx-v5 .helix-app .hx-col-dot, html.hx-v5 .helix-app .hx-col-hint { display: none; }
  html.hx-v5 .helix-app .hx-col-title { min-width: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; color: var(--v5-t1); line-height: 1.25; }
  html.hx-v5 .helix-app .hx-col-count { margin-left: auto; min-width: 0; height: auto; padding: 1px 8px; border: 0; border-radius: 999px; box-shadow: none;
    background: var(--v5-line); color: var(--v5-t2); font-size: 12px; font-weight: 600; }
  html.hx-v5 .helix-app .hx-col-body { padding: 8px 10px 12px; gap: 8px; }
  html.hx-v5 .helix-app .hx-board:has(> .hx5-dock) .hx-col-body { padding-bottom: 76px; }
  html.hx-v5 .helix-app .hx-col-empty { padding: 18px 10px; border: 1px dashed var(--v5-line); border-radius: 14px; background: transparent;
    color: var(--v5-t3); font-size: 12.5px; }
  html.hx-v5 .helix-app .hx-col-more { margin: 2px 0 4px; padding: 8px 12px; border: 0; border-radius: 14px; line-height: 1.3; background: var(--v5-line);
    color: var(--v5-t2); font-size: 12.5px; font-weight: 500; transition: background .2s var(--v5-eo), color .2s var(--v5-eo); }
  html.hx-v5 .helix-app .hx-col-more:hover { background: color-mix(in srgb, var(--v5-t1) 12%, transparent); color: var(--v5-t1); }

  /* ── Tarjetas: --v5-kcard, radio 16, sombra profunda; aro pequeño, grados y tiempo ── */
  html.hx-v5 .helix-app .hx-card { gap: 0; padding: 11px 12px; border: 0; border-radius: 16px; background: var(--v5-kcard); box-shadow: var(--v5-sh1);
    transition: transform .25s var(--v5-eo), box-shadow .35s var(--v5-eo), background .45s var(--v5-eo), opacity .2s var(--v5-eo); }
  html.hx-v5 .helix-app .hx-card:hover { transform: translateY(-2px); background: var(--v5-kcard); box-shadow: var(--v5-sh1); }
  /* .hx-board sube la especificidad por encima de las reglas del modo claro de helix-material.css */
  html.hx-v5 .helix-app .hx-board .hx-card.is-unread { box-shadow: var(--v5-sh1); }
  html.hx-v5 .helix-app .hx-board .hx-card.hx5-sel, html.hx-v5 .helix-app .hx-board .hx-card.is-recien, html.hx-v5 .helix-app .hx-board .hx-card:focus-visible {
    box-shadow: 0 0 0 2px var(--v5-acc), 0 18px 36px -14px color-mix(in srgb, var(--v5-acc) 60%, transparent); outline: none; }
  html.hx-v5 .helix-app .hx-card.is-dragging { opacity: .45; transform: none; }
  html.hx-v5 .helix-app .hx-card > .helix-avatar, html.hx-v5 .helix-app .hx-card-top .helix-heat-dot { display: none; }
  html.hx-v5 .helix-app .hx-card-main { gap: 4px; }
  html.hx-v5 .helix-app .hx-card-top { gap: 8px; }
  html.hx-v5 .helix-app .hx-card-name { font-size: 13.5px; font-weight: 600; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx-card.is-unread .hx-card-name { font-weight: 700; }
  html.hx-v5 .helix-app .hx-card .hx5-kav { position: relative; padding: 1.5px; box-sizing: border-box; }
  /* El aro de temperatura gana a los avatares rellenos de la Bandeja (#helix-content .hx5-av alcanza a todo el panel). */
  html.hx-v5 .helix-app #helix-content .hx-card .hx5-kav { background: var(--ring, #5A5A64); }
  html.hx-v5 .helix-app .hx-card .hx5-kav > span { position: relative; overflow: hidden; font-size: 9px; }
  html.hx-v5 .helix-app .hx-card .hx5-kav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  html.hx-v5 .helix-app .hx-card .hx5-kav .hx-unread { position: absolute; inset: -6px -8px auto auto; margin: 0; min-width: 15px; width: auto; height: 15px; padding: 0 4px; box-sizing: border-box;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--v5-acc); color: #fff;
    font-size: 9.5px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--v5-kcard), 0 4px 10px -4px color-mix(in srgb, var(--v5-acc) 70%, transparent); }
  html.hx-v5 .helix-app .hx-card-snippet { font-size: 12.5px; line-height: 1.35; color: var(--v5-t2); }
  html.hx-v5 .helix-app .hx5-kf { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11.5px; color: var(--v5-t3); }
  html.hx-v5 .helix-app .hx5-kf .hx5-deg { font-size: 12px; }
  /* canal: la misma marca rellena que la fila de la Bandeja (Alex, 24-09) */
  html.hx-v5 .helix-app .hx5-kf .helix-row-canal { margin-left: auto; width: 17px; height: 17px; border-radius: 5.5px; justify-content: center; background: #25D366; }
  html.hx-v5 .helix-app .hx5-kf .helix-row-canal[aria-label="Instagram"] { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
  html.hx-v5 .helix-app .hx5-kf .helix-row-canal svg { width: 11px; height: 11px; stroke-width: 2.2; color: #fff; }
  html.hx-v5 .helix-app .hx5-kf .hx-card-time { margin-left: auto; font-size: 11.5px; color: var(--v5-t3); }
  html.hx-v5 .helix-app .hx5-kf .helix-row-canal + .hx-card-time { margin-left: 0; }
  html.hx-v5 .helix-app .hx-card-tail { gap: 5px; margin-top: 2px; }
  html.hx-v5 .helix-app .hx-card-tail:not(:has(> *)) { display: none; }
  html.hx-v5 .helix-app .hx-card-tail .helix-tag { height: 18px; padding: 0 7px; gap: 3px; border: 0; border-radius: 999px; box-shadow: none;
    background: var(--v5-line); color: var(--v5-t2); font-size: 10.5px; font-weight: 500; }
  html.hx-v5 .helix-app .hx-card-tail .helix-tag--accent { background: color-mix(in srgb, var(--v5-acc) 14%, transparent); color: var(--v5-acc); }
  html.hx-v5 .helix-app .hx-card-tail .helix-tag--warning { background: rgba(255, 159, 10, .14); color: #E08A00; }
  html.hx-v5[data-theme="dark"] .helix-app .hx-card-tail .helix-tag--warning { color: #FFB340; }
  html.hx-v5 .helix-app .hx-card-tail .helix-tag--danger { background: rgba(255, 69, 58, .12); color: #E0443A; }
  html.hx-v5[data-theme="dark"] .helix-app .hx-card-tail .helix-tag--danger { color: #FF7B72; }
  html.hx-v5 .helix-app .hx-card-tail .helix-tag--signal { background: rgba(52, 199, 89, .14); color: #1F9E47; }
  html.hx-v5[data-theme="dark"] .helix-app .hx-card-tail .helix-tag--signal { color: #4CD964; }

  /* ── Arrastre: dónde se puede soltar (filo discontinuo coral) y dónde no (atenuado) ── */
  html.hx-v5 .helix-app .hx-board.is-dragging .hx-col:not(.is-droppable) { opacity: .5; }
  html.hx-v5 .helix-app .hx-board.is-dragging .hx-col.is-droppable { border: 0; outline: 1.5px dashed color-mix(in srgb, var(--v5-acc) 65%, transparent); outline-offset: -1.5px; }
  html.hx-v5 .helix-app .hx-board .hx-col.is-over { outline-color: transparent; background: color-mix(in srgb, var(--v5-acc) 12%, var(--v5-col));
    box-shadow: inset 0 0 0 2px var(--v5-acc), 0 18px 40px -18px color-mix(in srgb, var(--v5-acc) 55%, transparent); }

  /* ── Descartados: plegado en un carril discreto; se despliega al pulsarlo (y sigue aceptando tarjetas) ── */
  html.hx-v5 .helix-app .hx-col[data-etapa="perdidos"] .hx-col-head { cursor: pointer; border-radius: 12px; }
  html.hx-v5 .helix-app .hx-col[data-etapa="perdidos"] .hx-col-title { color: var(--v5-t2); }
  html.hx-v5 .helix-app .hx-col[data-etapa="perdidos"] .hx-col-head:focus-visible { outline: 2px solid var(--v5-acc); outline-offset: -2px; }
  html.hx-v5 .helix-app .hx-board:not(.hx5-desc-abierta) .hx-col[data-etapa="perdidos"] { flex: 0 0 46px; min-width: 46px; padding: 10px 0; cursor: pointer; }
  html.hx-v5 .helix-app .hx-board:not(.hx5-desc-abierta) .hx-col[data-etapa="perdidos"]:hover { background: color-mix(in srgb, var(--v5-t1) 6%, var(--v5-col)); }
  html.hx-v5 .helix-app .hx-board:not(.hx5-desc-abierta) .hx-col[data-etapa="perdidos"] .hx-col-body { display: none; }
  html.hx-v5 .helix-app .hx-board:not(.hx5-desc-abierta) .hx-col[data-etapa="perdidos"] .hx-col-head { flex-direction: column; gap: 10px; padding: 4px 0; height: 100%; }
  html.hx-v5 .helix-app .hx-board:not(.hx5-desc-abierta) .hx-col[data-etapa="perdidos"] .hx-col-count { order: -1; margin: 0; }
  html.hx-v5 .helix-app .hx-board:not(.hx5-desc-abierta) .hx-col[data-etapa="perdidos"] .hx-col-head::before { order: -2; }
  html.hx-v5 .helix-app .hx-board:not(.hx5-desc-abierta) .hx-col[data-etapa="perdidos"] .hx-col-title { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12.5px; font-weight: 500; white-space: nowrap; }

  /* ── Dock inferior de cristal: Filtrar y Ordenar (en pantalla) y «Nuevo lead» si el alta manual existe ── */
  html.hx-v5 .helix-app .hx5-dock { position: absolute; left: 50%; bottom: 24px; z-index: 3; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px;
    --r: 999px; --drop: 0 18px 40px -18px rgba(0, 0, 0, .55); transition: opacity .2s var(--v5-eo); }
  html.hx-v5 .helix-app .hx5-dock-sep { display: none; width: 1px; margin: 8px 2px; background: var(--v5-line); }
  html.hx-v5 .helix-app .hx5-dock:has(> .hx5-dock-pri:not([hidden])) .hx5-dock-sep { display: block; }
  html.hx-v5 .helix-app .hx5-dock button.is-on { background: color-mix(in srgb, var(--v5-acc) 14%, transparent); color: var(--accent-soft); }
  html.hx-v5 .helix-app .hx5-dock button[aria-expanded="true"] { background: var(--v5-line); }
  html.hx-v5 .helix-app .hx5-dock-n { font-style: normal; font-size: 11px; font-weight: 700; line-height: 18px; min-width: 18px; height: 18px; padding: 0 5px;
    box-sizing: border-box; border-radius: 999px; text-align: center; background: var(--v5-acc); color: #fff; }
  html.hx-v5 .helix-app .hx5-dock-n:empty { display: none; }
  html.hx-v5 .helix-app .hx5-menu { position: absolute; z-index: 5; width: 336px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 14px;
    --r: 20px; --vb: 34px; --lgb: var(--v5-sheet); --drop: 0 24px 50px -20px rgba(0, 0, 0, .55); animation: hx5-entra .28s var(--v5-eo) both; }
  html.hx-v5 .helix-app .hx5-vacio-filtro { border-style: dashed; }
  html.hx-v5 .helix-app .hx-board.is-dragging .hx5-dock { opacity: 0; pointer-events: none; }
  html.hx-v5 .helix-app .hx5-dock button { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px;
    background: transparent; color: var(--v5-t1); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
    transition: transform .12s var(--v5-eo), filter .2s var(--v5-eo), box-shadow .2s var(--v5-eo); }
  html.hx-v5 .helix-app .hx5-dock button.hx5-dock-pri { background: var(--v5-acc); color: #fff; font-weight: 600; }
  html.hx-v5 .helix-app .hx5-dock button.hx5-dock-pri:hover { filter: brightness(1.08); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--v5-acc) 70%, transparent); }
  html.hx-v5 .helix-app .hx5-dock button:active { transform: scale(.97); }
  html.hx-v5 .helix-app .hx5-dock button svg { width: 15px; height: 15px; flex: none; }

  /* ── Entrada escalonada al pintar el tablero (capa v9 del prototipo) ── */
  html.hx-v5 .helix-app .hx-board.hx5-entra .hx-board-bar > * { animation: hx5-entraL .5s var(--v5-eo) both; }
  html.hx-v5 .helix-app .hx-board.hx5-entra .hx-col,
  html.hx-v5 .helix-app .hx-board.hx5-entra .hx-card { animation: hx5-entra .6s var(--v5-eo) both; animation-delay: calc(var(--i, 0) * 45ms); }
  html.hx-v5 .helix-app .hx-board.hx5-entra .hx5-dock { animation: hx5emb-dock .6s var(--v5-eo) .35s both; }
}

@keyframes hx5emb-dock { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }