/* =========================================================
   Helix · Material (2026-09-03, v3 "sistema serio")
   Principio: el cristal (Liquid Glass) vive SOLO en el chrome y en los
   controles (barra lateral, buscador, filtros, botones, composer, hojas,
   dialogos, toasts). El contenido (paneles, tarjetas, formularios, graficas)
   es plano, opaco, denso y con filos de 1 px: como Cursor y como macOS.
   Referencias de Alex: capsulas de cristal como lentes, cristal neutro,
   fondo grafito satinado, profundidad real, sin barridos. Ultima hoja en
   cargar; pisa a helix-signature.css. Oscuro primero.
   ========================================================= */

/* ---------- Tokens ---------- */
[data-theme="dark"] {
  --text-1: #EDEEF0;
  --text-2: #A9AEB6;
  --text-3: #7A8089;
  --hair: rgba(255, 255, 255, 0.07);
  --hair-strong: rgba(255, 255, 255, 0.13);
  --layer-1: rgba(255, 255, 255, 0.03);
  --layer-2: rgba(255, 255, 255, 0.055);
  --layer-3: rgba(255, 255, 255, 0.09);
  --accent-soft: #9CC7FF;
  --veil: transparent;
  /* Superficies */
  --slab-bg: rgba(19, 22, 26, 0.80);
  --slab-line: rgba(255, 255, 255, 0.085);
  --slab-sombra: 0 16px 40px rgba(0, 0, 0, 0.34), 0 1px 2px rgba(0, 0, 0, 0.30);
  --card-bg: rgba(255, 255, 255, 0.028);
  --card-line: rgba(255, 255, 255, 0.07);
  --sunken-bg: rgba(0, 0, 0, 0.20);
  --r-slab: 16px;
  --r-card: 10px;
  --gutter: 24px;
  /* Cristal (controles) */
  --lg-pulsado: rgba(0, 0, 0, 0.18);
  --lg-texto-sombra: 0 1px 2px rgba(0, 0, 0, 0.35);
  --row-bg: transparent; --row-border: transparent; --row-border-hover: transparent; --row-shadow: none;
  --chip-fu-bg: var(--layer-2); --chip-fu-text: var(--text-2);
  --bubble-lead-bg: rgba(255, 255, 255, 0.07);
  --bubble-ia-bg: rgba(10, 132, 255, 0.15);
  --bubble-ia-border: rgba(140, 190, 255, 0.22);
  --bubble-alex-bg: rgba(255, 130, 70, 0.13);
  --bubble-alex-border: rgba(255, 160, 110, 0.22);
  --blob-opacity: 0; --strand-opacity: 0;
  --ease-spring: cubic-bezier(0.22, 1.28, 0.36, 1);
}
:root:not([data-theme="dark"]) {
  --text-1: #1B1F24;
  --text-2: #454D57;
  --text-3: #656E79;
  --hair: rgba(0, 0, 0, 0.08); --hair-strong: rgba(0, 0, 0, 0.14);
  --layer-1: rgba(0, 0, 0, 0.03); --layer-2: rgba(0, 0, 0, 0.05); --layer-3: rgba(0, 0, 0, 0.08);
  --accent-soft: #1F6FD6;
  --veil: transparent;
  --slab-bg: rgba(255, 255, 255, 0.86);
  --slab-line: rgba(0, 0, 0, 0.09);
  --slab-sombra: 0 16px 40px rgba(20, 30, 45, 0.10), 0 1px 2px rgba(0, 0, 0, 0.05);
  --card-bg: #FFFFFF;
  --card-line: rgba(0, 0, 0, 0.09);
  --sunken-bg: rgba(0, 0, 0, 0.045);
  --r-slab: 16px; --r-card: 10px; --gutter: 24px;
  --lg-pulsado: rgba(0, 0, 0, 0.07);
  --lg-texto-sombra: none;
  --blob-opacity: 0; --strand-opacity: 0;
  --ease-spring: cubic-bezier(0.22, 1.28, 0.36, 1);
}

/* ---------- Base ---------- */
.helix-app { font-size: 13px; letter-spacing: -0.008em; -webkit-font-smoothing: antialiased; background: transparent; }
.helix-app *::-webkit-scrollbar { width: 8px; height: 8px; }
.helix-app *::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.helix-app *::-webkit-scrollbar-track { background: transparent; }
.helix-app *:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

/* ---------- Fondo: grafito satinado, neutro (sin foto, sin luces de color) ---------- */
[data-theme="dark"] #helix-bg {
  background-image:
    radial-gradient(60% 50% at 18% 8%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(170deg, #2A3036 0%, #1E2328 46%, #15181C 100%);
  background-size: auto; background-position: 0 0;
  box-shadow: inset 0 0 200px 30px rgba(0, 0, 0, 0.26);
  opacity: 1;
}
:root:not([data-theme="dark"]) #helix-bg {
  background-image:
    radial-gradient(60% 50% at 18% 8%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(170deg, #E9ECF0 0%, #D9DEE4 50%, #CBD1D8 100%);
  background-size: auto; background-position: 0 0;
  box-shadow: inset 0 0 160px 20px rgba(0, 0, 0, 0.05);
  opacity: 1;
}
body[data-screen="agenda"] #helix-bg { opacity: 1; }
#helix-bg .bg-blob, #helix-bg .bg-strands { display: none; }
#helix-bg::before { content: none; }
#helix-bg::after {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* =========================================================
   1. SUPERFICIES DE CONTENIDO (planas)
   ========================================================= */
/* Losas: la lista de la bandeja, el panel de detalle y cada pantalla. Sin filo
   pseudo (una capa absoluta dentro de un scroller se desplaza con el contenido). */
.helix-app .helix-tab-pane.is-active,
.helix-app .helix-split-detail,
.helix-app .helix-shell.inbox-active .helix-content {
  position: relative;
  background: var(--slab-bg);
  background-image: none;
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  backdrop-filter: blur(24px) saturate(120%);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px var(--slab-line), var(--slab-sombra);
  filter: none;
}
.helix-app .helix-tab-pane.is-active::before,
.helix-app .helix-tab-pane.is-active::after,
.helix-app .helix-split-detail::before,
.helix-app .helix-split-detail::after { content: none; }
.helix-app .helix-lead-detail { background: transparent; }
.helix-app .helix-detail-empty { color: var(--text-3); font-size: 13px; }

/* Rejilla: un solo margen interior para todas las pantallas que no son la bandeja */
.helix-app .helix-shell:not(.inbox-active) .helix-tab-pane.is-active { padding: 18px var(--gutter) 32px; }
.helix-app .helix-insights { padding: 0; max-width: 1440px; margin: 0; }
.helix-app .helix-settings { padding: 0; max-width: 960px; margin: 0; }
.helix-app .helix-settings-wrap { padding: 0; max-width: 960px; margin: 0; }
.helix-app .helix-settings-header, .helix-app .helix-insights-header { margin-bottom: 14px; }

/* Tarjetas: planas, opacas al tacto, filo de 1 px, radio contenido */
.helix-app .helix-settings-section,
.helix-app .helix-insights-card,
.helix-app .helix-kpi-v2,
.helix-app .hx-col,
.helix-app .hx-agenda-dia,
.helix-app .hx-agenda-sheet-card,
.helix-app .hx-step {
  position: relative;
  background: var(--card-bg);
  background-image: none;
  border: 0;
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--card-line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  filter: none;
}
.helix-app .helix-settings-section::before, .helix-app .helix-insights-card::before, .helix-app .helix-kpi-v2::before,
.helix-app .hx-col::before, .helix-app .hx-agenda-dia::before, .helix-app .hx-agenda-sheet-card::before, .helix-app .hx-step::before,
.helix-app .helix-settings-section::after, .helix-app .helix-insights-card::after, .helix-app .helix-kpi-v2::after,
.helix-app .hx-col::after, .helix-app .hx-agenda-dia::after, .helix-app .hx-agenda-sheet-card::after, .helix-app .hx-step::after { content: none; }
.helix-app .signal-border.helix-insights-card::before { content: none; }
.helix-app .helix-settings-section { padding: 16px 18px; margin-bottom: 12px; }
.helix-app .helix-insights-card-inner { padding: 14px 16px; }
.helix-app .helix-kpi-v2 { padding: 12px 14px; }
.helix-app .hx-col { padding: 0; }
.helix-app .hx-agenda-dia { padding: 10px 10px; }
.helix-app .hx-step { padding: 10px 12px; }

/* Cabeceras de seccion: titulo compacto, descripcion que no grita */
.helix-app .helix-settings-section > .t-eyebrow:first-child,
.helix-app .helix-settings-section > h2,
.helix-app .helix-settings-section > h3 {
  font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-1); text-transform: none; margin-bottom: 4px; text-shadow: none;
}
.helix-app .helix-settings-section > .t-eyebrow:first-child + .t-caption {
  font-size: 12.5px !important; line-height: 1.5 !important; color: var(--text-3) !important; margin: 0 0 12px !important;
}
.helix-app .helix-setting-row { padding: 11px 0; gap: 14px; border-bottom: 1px solid var(--hair); }
.helix-app .helix-setting-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.helix-app .helix-setting-label { font-size: 13px; font-weight: 500; line-height: 1.35; }
.helix-app .helix-setting-label .t-caption, .helix-app .helix-setting-label .hx-help, .helix-app .hx-help, .helix-app .hx-state-note { font-size: 12px; color: var(--text-3); }

/* Elementos de lista dentro de una seccion: filas, no tarjetas dentro de tarjetas */
.helix-app .hx-item {
  background: transparent; border: 0; border-top: 1px solid var(--hair); border-radius: 0;
  box-shadow: none; padding: 10px 0; margin: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.helix-app .hx-item::before, .helix-app .hx-item::after { content: none; }
.helix-app .hx-item-title { font-size: 13px; }
.helix-app .hx-item-meta { font-size: 12px; color: var(--text-3); }
.helix-app .hx-step-name { font-size: 13px; }
.helix-app .hx-step-note { font-size: 12px; }

/* Insights */
.helix-app .helix-insights-card-head { font-size: 13.5px; font-weight: 600; }
.helix-app .helix-kpi-v2-label { font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-3); }
.helix-app .helix-kpi-v2-num { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.helix-app .helix-kpi-v2-delta { font-size: 11px; }
.helix-app .helix-kpi-v2-delta--flat { background: var(--layer-2); }
.helix-app .helix-kpi-v2--signal .helix-kpi-v2-num { background: none; -webkit-text-fill-color: var(--text-1); color: var(--text-1); }
/* Graficas: un color por serie, sin degradados */
.helix-app .helix-area-chart path[stroke="url(#helix-area-signal)"] { stroke: #30D158; }
.helix-app .helix-area-chart path[fill^="url(#helix-area-grad"] { fill: #30D158; fill-opacity: 0.08; }
.helix-app .helix-area-chart path[stroke="#FF6B35"] { stroke: #FF9F0A; }
.helix-app .helix-area-chart path[fill="#FF6B35"] { fill: #FF9F0A; }
.helix-app .helix-area-chart circle[fill="#FF6B35"] { fill: #FF9F0A; }
.helix-app .helix-sparkline path[stroke^="url(#spark-grad"] { stroke: var(--text-2); }
.helix-app .helix-sparkline path[fill^="url(#spark-grad"] { fill: var(--text-2); }
.helix-app .helix-insights [style*="grad-signal"] { background: #30D158 !important; }
.helix-app .helix-insights [style*="#FF6B35"] { background: #FF9F0A !important; }
.helix-app .helix-area-tooltip, .helix-app .helix-area-tooltip-date { font-size: 12px; }
.helix-app .helix-tag--signal { background: rgba(10, 132, 255, 0.22); color: var(--accent-soft); box-shadow: none; }

/* Pipeline */
.helix-app .hx-col-head { border-bottom: 1px solid var(--hair); }
.helix-app .hx-col-title { font-size: 13px; font-weight: 600; }
.helix-app .hx-col-hint { font-size: 12px; }
.helix-app .hx-col-count { background: var(--layer-2); border: 0; box-shadow: inset 0 0 0 1px var(--hair); color: var(--text-2); font-size: 11.5px; }
.helix-app .hx-col-empty { border: 1px dashed var(--hair-strong); color: var(--text-3); font-size: 12.5px; border-radius: 8px; }
.helix-app .hx-board-total { font-size: 13px; }
.helix-app .hx-board-hint { font-size: 12.5px; }
.helix-app .hx-card {
  background: var(--layer-2); border: 0; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.helix-app .hx-card:hover { background: var(--layer-3); transform: none; box-shadow: inset 0 0 0 1px var(--hair-strong); }
.helix-app .hx-card.is-unread::before { content: none; }
.helix-app .hx-card.is-unread { box-shadow: inset 0 0 0 1px rgba(120, 180, 255, 0.40); }
.helix-app .hx-card-name { font-size: 13px; font-weight: 500; }
.helix-app .hx-card-snippet { font-size: 12.5px; color: var(--text-3); }

/* Agenda */
.helix-app .hx-agenda-toolbar { gap: 8px; margin-bottom: 14px; }
.helix-app .hx-agenda-toolbar .hx-agenda-rango { font-size: 14px; }
.helix-app .hx-agenda-hueco, .helix-app .hx-agenda-tipo { background: var(--layer-2); border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--hair); }
.helix-app .hx-agenda-hueco:hover { background: var(--layer-3); }
.helix-app .hx-agenda-dia-titulo { font-size: 13px; font-weight: 600; }
.helix-app .hx-agenda-dia-cab b { font-size: 13px; }
.helix-app .hx-agenda-horas { font-size: 11px; }
.helix-app .hx-agenda-cita, .helix-app .hx-agenda-bloqueo, .helix-app .hx-agenda-externo { border-radius: 8px; box-shadow: none; }
.helix-app .hx-agenda-cita { background: var(--layer-2); border: 1px solid var(--hair); }
.helix-app .hx-agenda-cita:hover { border-color: var(--hair-strong); }

/* Sub-navegacion (Calendario / Ajustes): segmentado plano dentro de la rejilla */
.helix-app .helix-subnav {
  display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 16px;
  background: var(--sunken-bg); border: 0; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.helix-app .helix-subnav-btn {
  min-height: 28px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-3); font-size: 12.5px; font-weight: 500; box-shadow: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.helix-app .helix-subnav-btn:hover { color: var(--text-1); background: transparent; }
.helix-app .helix-subnav-btn.is-active {
  background: var(--layer-3); color: var(--text-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(0, 0, 0, 0.30);
}

/* Opciones de radio (tarjetas de eleccion) y segmentados de Ajustes */
.helix-app .hx-choice { background: var(--layer-1); border: 0; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--card-line); }
.helix-app .hx-choice:hover { background: var(--layer-2); }
.helix-app .hx-choice:has(input:checked) { background: rgba(10, 132, 255, 0.10); box-shadow: inset 0 0 0 1px rgba(120, 180, 255, 0.40); }
.helix-app .hx-choice-title { font-size: 13px; }
.helix-app .hx-choice-desc { font-size: 12px; }
.helix-app .helix-setting-option { background: transparent; border-color: transparent; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-strong); font-size: 12.5px; }
.helix-app .helix-setting-option:hover { background: var(--layer-2); }
.helix-app .helix-setting-option.is-active { background: rgba(10, 132, 255, 0.14); color: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(120, 180, 255, 0.40); }

/* Campos: hundidos y planos (nada de cristal en un campo) */
.helix-app .hx-field,
.helix-app input.hx-field,
.helix-app textarea.hx-field,
.helix-app select.hx-field,
.helix-app .helix-input {
  border-radius: 8px; border: 0; color: var(--text-1); font-size: 13px; min-height: 34px;
  background: var(--sunken-bg);
  box-shadow: inset 0 0 0 1px var(--hair-strong), inset 0 1px 2px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.helix-app .hx-field::before, .helix-app .hx-field::after { content: none; }
.helix-app .hx-field:focus, .helix-app .helix-input:focus { outline: 0; box-shadow: inset 0 0 0 1px rgba(120, 180, 255, 0.55), 0 0 0 3px var(--accent-ring); }
.helix-app .hx-field-label { font-size: 12.5px; color: var(--text-2); }
.helix-app .hx-switch-track { background: rgba(0, 0, 0, 0.30); border: 0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--hair-strong); }
.helix-app .hx-switch-thumb { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.helix-app .hx-switch input:checked ~ .hx-switch-track { background: rgba(10, 132, 255, 0.80); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.helix-app .hx-stepper { background: var(--sunken-bg); border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-strong), inset 0 1px 2px rgba(0, 0, 0, 0.22); }
.helix-app .hx-stepper button:hover { background: var(--layer-2); }

/* =========================================================
   2. SHELL: barra lateral como capsula de cristal, cabecera transparente
   ========================================================= */
.helix-app .helix-shell { background: transparent; }
.helix-app .helix-workspace { background: transparent; }
@media (min-width: 1024px) {
  .helix-app .helix-shell { box-sizing: border-box; padding: 14px 14px 14px 0; gap: 0; }
  .helix-app .helix-sidebar {
    width: 60px;
    margin: 0 12px 0 14px;
    padding: 10px 0 10px;
    border-radius: 999px;
    border-right: 0;
    align-self: stretch;
  }
  .helix-app .helix-sidebar.is-expanded { width: 228px; border-radius: 28px; }
  .helix-app .helix-sidebar-brand { padding: 0; justify-content: center; height: 40px; margin-bottom: 10px; }
  .helix-app .helix-sidebar.is-expanded .helix-sidebar-brand { padding: 0 16px; justify-content: flex-start; }
  .helix-app .helix-sidebar-nav { gap: 4px; padding: 0 10px; }
  .helix-app .helix-sidebar-footer { border-top: 1px solid var(--hair); padding: 8px 10px 0; }
  .helix-app .helix-topbar { background: transparent; border: 0; box-shadow: none; height: 46px; padding: 0 6px; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .helix-app .helix-split { gap: 12px; }
  .helix-app .helix-tab-pane.is-active,
  .helix-app .helix-split-detail { border-radius: var(--r-slab); overflow: hidden; }
  .helix-app .helix-tab-pane.is-active { overflow-y: auto; }
  .helix-app .helix-shell.inbox-active .helix-content { border-right: 0; }
}
.helix-app .helix-topbar-breadcrumb-current { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-2); text-shadow: var(--lg-texto-sombra); }

/* Iconos de navegacion: trazo 2, rellenos en la pestana activa; el Dock los escala por transform */
.helix-app .helix-sidebar-item svg, .helix-app .helix-bottom-nav-item svg { stroke-width: 2; transform-origin: 50% 50%; }
.helix-app .hx-ico { display: contents; }
.helix-app .hx-ico-fill { display: none; }
.helix-app .is-active > .hx-ico { display: none; }
.helix-app .is-active > .hx-ico-fill { display: contents; }
/* Barra lateral: items e indicador deslizante (capsula hundida) */
.helix-app .helix-sidebar-nav { position: relative; }
.helix-app .helix-sidebar-item {
  position: relative; z-index: 1;
  min-height: 40px; padding: 8px 10px;
  border-radius: 999px;
  color: var(--text-3);
  font-size: 13px; font-weight: 500;
  justify-content: center;
  transition: color var(--dur-fast) var(--ease-out), transform 90ms var(--ease-out);
  text-shadow: var(--lg-texto-sombra);
}
.helix-app .helix-sidebar.is-expanded .helix-sidebar-item { justify-content: flex-start; }
.helix-app .helix-sidebar-item:hover { background: transparent; color: var(--text-1); }
.helix-app .helix-sidebar-item:active { transform: scale(0.96); }
.helix-app .helix-sidebar .helix-sidebar-item.is-active,
[data-theme="dark"] .helix-app .helix-sidebar .helix-sidebar-item.is-active { background: transparent; box-shadow: none; color: var(--text-1); font-weight: 600; }
.helix-app .helix-sidebar-indicador {
  position: absolute; left: 10px; right: 10px; top: 0; height: 40px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.12) 55%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.12);
  opacity: 0; z-index: 0; pointer-events: none;
  transition: transform 420ms var(--ease-spring), height 200ms var(--ease-out), opacity 160ms var(--ease-out);
  will-change: transform;
}
.helix-app .helix-sidebar-indicador.sin-transicion { transition: none; }
.helix-app .helix-sidebar-footer .helix-sidebar-item { color: var(--text-3); }

/* =========================================================
   3. BANDEJA: buscador y filtros (cristal), filas planas
   ========================================================= */
.helix-app .helix-inbox-search-wrap { padding: 12px 10px 8px; }
.helix-app .helix-inbox-search { height: 40px; padding: 0 14px; gap: 9px; border-radius: 999px; color: var(--text-3); }
.helix-app .helix-inbox-search svg { width: 15px; height: 15px; }
.helix-app .helix-inbox-search input { font-size: 13px; color: var(--text-1); }
.helix-app .helix-inbox-filter-btn { padding: 3px; border-radius: 999px; }
.helix-app .helix-canal-pills { margin: 0 10px 10px; padding: 5px; gap: 2px; border-radius: 999px; overflow-x: auto; }
.helix-app .helix-canal-pill,
.helix-app .helix-vista-chip {
  min-height: 30px; padding: 0 12px;
  border: 0; background: transparent; box-shadow: none;
  color: var(--text-3); font-size: 12.5px; font-weight: 500;
  border-radius: 999px;
  text-shadow: var(--lg-texto-sombra);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform 90ms var(--ease-out);
}
.helix-app .helix-canal-pill { min-width: 34px; padding: 0 9px; }
.helix-app .helix-canal-pill svg { width: 14px; height: 14px; }
.helix-app .helix-canal-pill:hover,
.helix-app .helix-vista-chip:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-1); }
.helix-app .helix-canal-pill.is-on,
.helix-app .helix-vista-chip.is-on {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.12) 55%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--text-1); border: 0;
}
.helix-app .helix-vista-chip-n { color: var(--text-3); font-weight: 500; margin-left: 2px; }
.helix-app .helix-canal-pills-sep { background: var(--hair); margin: 6px 2px; }
.helix-app .helix-inbox-section-header { padding: 6px 18px 6px; }
.helix-app .helix-inbox-section-label-muted { font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-3); }
.helix-app .helix-inbox-section-body { background: transparent; border: 0; }

.helix-app .helix-lead-row {
  background: transparent; border: 0; border-radius: 10px;
  margin: 0 8px 1px; box-shadow: none; transform: none;
  transition: background var(--dur-fast) var(--ease-out);
  animation: hx-fila-in 360ms var(--ease-out) both;
}
.helix-app .helix-lead-row:first-child { margin-top: 4px; }
.helix-app .helix-lead-row:hover { background: rgba(255, 255, 255, 0.045); border-color: transparent; transform: none; }
.helix-app .helix-lead-row.is-active { background: var(--lg-pulsado); border-color: transparent; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30), inset 0 -1px 0 rgba(255, 255, 255, 0.05); }
:root:not([data-theme="dark"]) .helix-app .helix-lead-row:hover { background: rgba(0, 0, 0, 0.04); }
.helix-app .helix-lead-row.is-unread::before { content: none; }
.helix-app .helix-row-active-bar { display: none; }
.helix-app .helix-row-stripe { width: 6px; height: 6px; }
.helix-app .helix-row-main { gap: 6px; }
.helix-app .helix-row-name { font-size: 13px; font-weight: 500; letter-spacing: -0.006em; flex: 0 0 auto; max-width: 44%; }
.helix-app .helix-lead-row.is-unread .helix-row-name { font-weight: 600 !important; color: var(--text-1); }
.helix-app .helix-row-snippet { font-size: 12.5px; color: var(--text-3); flex: 1 1 0; min-width: 32px; }
.helix-app .helix-row-time { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.helix-app .helix-lead-row .helix-tag,
.helix-app .helix-tag,
.helix-app .hx-tag {
  height: 19px; padding: 0 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 500;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  color: var(--text-2);
}
.helix-app .helix-lead-row .helix-tag--neutral, .helix-app .helix-tag--neutral { background: rgba(255, 255, 255, 0.07); color: var(--text-2); }
.helix-app .helix-lead-row .helix-tag--accent, .helix-app .helix-tag--accent { background: rgba(10, 132, 255, 0.22); color: var(--accent-soft); }
.helix-app .helix-lead-row .helix-tag--warning, .helix-app .helix-tag--warning { background: var(--warning-bg); color: var(--warning-text); }
.helix-app .hx-unread { min-width: 17px; height: 17px; padding: 0 5px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.helix-app .helix-avatar {
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.helix-app .helix-heat-pill { height: 22px; padding: 0 9px; font-size: 11.5px; }
.helix-app .helix-heat-pill--cliente { background: rgba(48, 209, 88, 0.20); color: #7EE59A; box-shadow: none; }

/* =========================================================
   4. FICHA DEL LEAD: cabecera, chat, composer
   ========================================================= */
.helix-app .helix-lead-detail-header,
.helix-app .helix-lead-context-bar,
.helix-app .helix-lead-detail-actionbar,
.helix-app .helix-lead-detail-input-bar,
.helix-app .helix-composer-preview {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: var(--hair);
}
.helix-app .helix-lead-detail-header { padding: 10px 16px; gap: 10px; min-height: 54px; }
.helix-app .helix-lead-detail-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.helix-app .helix-lead-detail-meta { font-size: 12px; gap: 8px; }
.helix-app .helix-lead-detail-phone { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0; color: var(--text-3); }
.helix-app .helix-lead-context-bar { padding: 6px 16px; }
.helix-app .helix-lead-detail-actionbar { padding: 8px 12px; gap: 6px; border-top: 1px solid var(--hair); }
.helix-app .helix-actionbar-btn { height: 34px; font-size: 12.5px; border-radius: 999px; color: var(--text-2); }
.helix-app .helix-actionbar-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-1); }
.helix-app .helix-actionbar-btn svg { width: 15px; height: 15px; }
.helix-app .helix-lead-detail-chat { padding: 14px 18px; gap: 8px; }
.helix-app .helix-chat-bubble {
  padding: 8px 12px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.45; letter-spacing: -0.006em;
  max-width: min(64%, 520px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.22);
}
.helix-app .helix-chat-bubble--lead { background: var(--bubble-lead-bg); border: 1px solid rgba(255, 255, 255, 0.07); }
.helix-app .helix-chat-bubble--ia { background: var(--bubble-ia-bg); border: 1px solid var(--bubble-ia-border); }
.helix-app .helix-chat-bubble--alex { background: var(--bubble-alex-bg); border: 1px solid var(--bubble-alex-border); }
.helix-app .helix-chat-bubble-row { animation: hx-fila-in 300ms var(--ease-out) both; }
.helix-app .helix-chat-avatar-mini { width: 24px; height: 24px; font-size: 10.5px; }
.helix-app .helix-chat-avatar-slot { width: 24px; height: 24px; }
.helix-app .helix-chat-avatar-mini--ia { background: var(--layer-2); border-color: var(--hair); }
.helix-app .helix-lead-detail-input-bar { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 8px; border-top: 1px solid var(--hair); }
.helix-app .helix-lead-detail-input {
  box-sizing: border-box; height: 38px; min-height: 38px; max-height: 120px;
  padding: 9px 14px; font-size: 13.5px;
  border-radius: 999px; border: 0;
  color: var(--text-1);
}
.helix-app .helix-composer-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 999px; color: var(--text-2); }
.helix-app .helix-lead-detail-send, .helix-app .helix-lead-detail-send:hover { width: 36px; height: 36px; border-radius: 999px; color: #fff; filter: none; background: transparent; }
.helix-composer-progress-fill { background: var(--accent); }

/* ---- Chat: burbujas como WhatsApp (hora y ticks dentro, sin avatares, sin agrupar) ---- */
.helix-app .helix-lead-detail { position: relative; }
.helix-app .helix-lead-detail-chat { gap: 3px; padding: 14px 16px; }
.helix-app .helix-chat-bubble-row { gap: 0; }
.helix-app .helix-chat-bubble-row[data-side="left"] + .helix-chat-bubble-row[data-side="right"],
.helix-app .helix-chat-bubble-row[data-side="right"] + .helix-chat-bubble-row[data-side="left"] { margin-top: 7px; }
.helix-app .helix-chat-avatar-slot { display: none; }
.helix-app .helix-chat-bubble {
  position: relative; padding: 6px 9px 7px 10px; border-radius: 10px;
  font-size: 14px; line-height: 1.42; max-width: min(65%, 560px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.helix-app .helix-chat-bubble--lead { background: rgba(255, 255, 255, 0.085); border: 0; }
.helix-app .helix-chat-bubble--ia { background: rgba(10, 132, 255, 0.20); border: 0; }
.helix-app .helix-chat-bubble--alex { background: rgba(10, 132, 255, 0.20); border: 0; border-left: 0; padding-left: 10px; }
.helix-app .helix-chat-trailing-time {
  float: right; display: inline-flex; align-items: center; gap: 3px;
  margin: 6px -3px -3px 10px; padding: 0; min-width: 0;
  font-size: 10.5px; line-height: 1; color: rgba(255, 255, 255, 0.55); white-space: nowrap;
}
.helix-app .helix-chat-caption + .helix-chat-trailing-time { margin-top: 4px; }
.helix-app .helix-status-manual { font-weight: 600; color: rgba(255, 255, 255, 0.70); margin-right: 2px; }
.helix-app .helix-tick { color: rgba(255, 255, 255, 0.55); }
.helix-app .helix-tick--read { color: #53BDEB; }
.helix-app .helix-tick--failed { color: var(--danger-text); }
.helix-app .helix-chat-day-divider-label { font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-3); background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--hair); }
.helix-app .helix-chat-nuevos { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; color: var(--accent-soft); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.helix-app .helix-chat-nuevos::before, .helix-app .helix-chat-nuevos::after { content: ""; flex: 1; height: 1px; background: rgba(120, 180, 255, 0.35); }
.helix-app .helix-chat-escribiendo .helix-chat-bubble { padding: 9px 12px; min-width: 52px; }
.helix-app .helix-chat-puntos { display: inline-flex; gap: 4px; align-items: center; height: 10px; }
.helix-app .helix-chat-puntos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.65); animation: hx-punto 1.2s ease-in-out infinite; }
.helix-app .helix-chat-puntos i:nth-child(2) { animation-delay: 0.15s; }
.helix-app .helix-chat-puntos i:nth-child(3) { animation-delay: 0.30s; }
@keyframes hx-punto { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
.helix-app .helix-chat-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 2px; word-break: break-all; }
.helix-app .helix-chat-link:hover { text-decoration-color: currentColor; }
.helix-app .helix-chat-bubble--ia .helix-chat-link, .helix-app .helix-chat-bubble--alex .helix-chat-link { color: #BFD9FF; }
.helix-app .helix-chat-day-divider-label { font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-3); background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--hair); }
.helix-app .helix-lead-detail-actionbar { justify-content: flex-end; gap: 6px; padding: 6px 12px; }
.helix-app .helix-actionbar-btn { flex: 0 0 auto; height: 30px; padding: 0 11px; font-size: 12.5px; background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--hair); }
.helix-app .helix-actionbar-btn:hover { background: var(--layer-2); }
.helix-app .helix-actionbar-btn.is-done { color: var(--positive-text); }
.helix-app .helix-chat-bajar {
  position: absolute; left: 50%; bottom: 116px; z-index: 3;
  width: 32px; height: 32px; border-radius: 999px; border: 0; padding: 0;
  display: grid; place-items: center; color: var(--text-1); cursor: pointer;
  background: rgba(40, 44, 50, 0.92); box-shadow: inset 0 0 0 1px var(--hair-strong), 0 6px 16px rgba(0, 0, 0, 0.40);
  opacity: 0; transform: translate(-50%, 8px) scale(0.9); pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 260ms var(--ease-spring);
}
.helix-app .helix-chat-bajar.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
@media (min-width: 1024px) {
  .helix-app .helix-lead-detail-header [data-action="back"] { display: none; }
}

/* =========================================================
   5. BOTONES (capsulas de cristal)
   ========================================================= */
.helix-app .helix-btn {
  border-radius: 999px; font-weight: 500; gap: 6px; letter-spacing: -0.006em;
  color: var(--text-1); text-shadow: var(--lg-texto-sombra);
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform 90ms var(--ease-out);
}
.helix-app .helix-btn:active { transform: scale(0.97); }
.helix-app .helix-btn--sm { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }
.helix-app .helix-btn--md { min-height: 34px; padding: 6px 14px; font-size: 13px; }
.helix-app .helix-btn--lg { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.helix-app .helix-btn--primary { color: #fff; font-weight: 600; border: 0; }
.helix-app .helix-btn--ghost { background: transparent; box-shadow: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.helix-app .helix-btn--ghost:hover { background: var(--layer-2); }
.helix-app .helix-btn--danger { color: var(--danger-text); }
.helix-app .helix-icon-btn { min-width: 34px; min-height: 34px; padding: 7px; border-radius: 999px; color: var(--text-2); border: 0; }
.helix-app .helix-icon-btn:hover { color: var(--text-1); }
.helix-app .helix-icon-btn:active { transform: scale(0.94); }
.helix-app .helix-heat-toggle { padding: 4px 12px; font-size: 12.5px; border-radius: 999px; color: var(--text-2); border: 0; }
.helix-app .helix-heat-toggle.is-on { color: var(--text-1); }
.helix-app .helix-btn, .helix-app .helix-sheet-action, .helix-app .helix-sidebar-item, .helix-app .helix-canal-pill, .helix-app .helix-vista-chip { text-shadow: 0 0 6px rgba(255, 255, 255, 0.14), 0 1px 0 rgba(255, 255, 255, 0.08); }

/* =========================================================
   6. RECETA DE CRISTAL: cuerpo translucido + filo renderizado.
   El cuerpo es una capa ::after (fondo translucido + desenfoque). El filo es
   un render fotorealista de una capsula de cristal (Nano Banana Pro) del que
   solo se conserva el borde especular (img/filo-cristal-h.png y -v.png),
   montado con border-image en 9 partes: los extremos redondeados se conservan
   y el tramo recto se estira. --hx-h es la altura de la capsula (cada extremo
   mide la mitad). Solo chrome y controles; nunca dentro de un scroller.
   ========================================================= */
.helix-app .helix-sidebar,
.helix-app .helix-btn--secondary,
.helix-app .helix-btn--primary,
.helix-app .helix-btn--danger,
.helix-app .helix-icon-btn,
.helix-app .helix-lead-detail-send,
.helix-app .helix-composer-btn,
.helix-app .helix-heat-toggle,
.helix-app .helix-bottom-nav,
.helix-app .helix-dialog,
.helix-toast {
  --hx-h: 34px;
  position: relative;
  background: transparent;
  background-image: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0;
  box-shadow: none;
  isolation: isolate;
}
.helix-app .helix-sidebar::before, .helix-app .helix-btn--secondary::before,
.helix-app .helix-btn--primary::before, .helix-app .helix-btn--danger::before, .helix-app .helix-icon-btn::before,
.helix-app .helix-lead-detail-send::before, .helix-app .helix-composer-btn::before, .helix-app .helix-heat-toggle::before,
.helix-app .helix-bottom-nav::before, .helix-app .helix-dialog::before, .helix-toast::before { content: none; }
.helix-app .helix-sidebar::after,
.helix-app .helix-btn--secondary::after,
.helix-app .helix-btn--primary::after,
.helix-app .helix-btn--danger::after,
.helix-app .helix-icon-btn::after,
.helix-app .helix-lead-detail-send::after,
.helix-app .helix-composer-btn::after,
.helix-app .helix-heat-toggle::after,
.helix-app .helix-bottom-nav::after,
.helix-app .helix-dialog::after,
.helix-toast::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.035);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 45%, rgba(0, 0, 0, 0.05) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  backdrop-filter: blur(10px) saturate(135%);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.04), 0 10px 24px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.18);
  border: 0 solid transparent;
  border-image: url("/static/dashboard/img/filo-cristal-h.png?v=5") 100 120 100 120 / calc(var(--hx-h) * 0.417) calc(var(--hx-h) * 0.5) / 0 stretch;
  pointer-events: none;
}
/* Tamanos: la altura de cada capsula, para que el filo renderizado cierre en los extremos */
.helix-app .helix-btn--sm { --hx-h: 30px; }
.helix-app .helix-btn--md { --hx-h: 34px; }
.helix-app .helix-btn--lg { --hx-h: 40px; }
.helix-app .helix-icon-btn { --hx-h: 34px; }
.helix-app .helix-composer-btn, .helix-app .helix-lead-detail-send { --hx-h: 36px; }
.helix-app .helix-heat-toggle { --hx-h: 30px; }
.helix-toast { --hx-h: 34px; }
.helix-app .helix-dialog { --hx-h: 32px; }
.helix-app .helix-bottom-nav { --hx-h: 52px; }
/* Controles pequenos: filo mas suave (a 30 px el filo pleno se lee metalico) */
.helix-app .helix-btn--sm::after,
.helix-app .helix-icon-btn::after,
.helix-app .helix-composer-btn::after,
.helix-app .helix-lead-detail-send::after,
.helix-app .helix-heat-toggle::after {
  border-image-source: url("/static/dashboard/img/filo-cristal-h-suave.png?v=5");
}
/* Botones: cuerpo algo mas presente */
.helix-app .helix-btn--secondary::after,
.helix-app .helix-btn--primary::after,
.helix-app .helix-btn--danger::after,
.helix-app .helix-icon-btn::after,
.helix-app .helix-lead-detail-send::after,
.helix-app .helix-composer-btn::after,
.helix-app .helix-heat-toggle::after {
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.18);
}
.helix-app .helix-btn--primary::after, .helix-app .helix-lead-detail-send::after { background-color: rgba(10, 132, 255, 0.55); }
.helix-app .helix-btn--primary:hover::after, .helix-app .helix-lead-detail-send:hover::after { background-color: rgba(30, 145, 255, 0.65); }
.helix-app .helix-btn--secondary:hover::after, .helix-app .helix-icon-btn:hover::after, .helix-app .helix-composer-btn:hover::after { background-color: rgba(255, 255, 255, 0.09); }
.helix-app .helix-btn--danger:hover::after { background-color: rgba(255, 69, 58, 0.16); }
.helix-app .helix-heat-toggle.is-on::after { background-color: var(--lg-pulsado); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
/* Barra lateral: filo vertical (la capsula se estira en alto) */
.helix-app .helix-sidebar::after {
  background-color: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(14px) saturate(135%); backdrop-filter: blur(14px) saturate(135%);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02), 0 12px 28px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.20);
  border-image: url("/static/dashboard/img/filo-cristal-v-tenue.png?v=5") 120 100 120 100 / 30px 25px / 0 stretch;
}
.helix-app .helix-bottom-nav::after { -webkit-backdrop-filter: blur(14px) saturate(135%); backdrop-filter: blur(14px) saturate(135%); }
/* Dialogo: cristal denso para leer encima */
.helix-app .helix-dialog::after {
  background-color: rgba(28, 31, 36, 0.90);
  -webkit-backdrop-filter: blur(28px) saturate(120%); backdrop-filter: blur(28px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 3px rgba(0, 0, 0, 0.25), 0 24px 56px rgba(0, 0, 0, 0.45);
}
/* Lo que hace scroll, es un campo o es una capsula ancha y baja lleva cuerpo y filo en el propio elemento */
.helix-app .helix-inbox-search,
.helix-app .helix-canal-pills,
.helix-app .helix-lead-detail-input {
  --hx-h: 40px;
  position: relative;
  border: 0 solid transparent;
  background-color: rgba(255, 255, 255, 0.04);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.008) 45%, rgba(0, 0, 0, 0.05) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(135%); backdrop-filter: blur(12px) saturate(135%);
  box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.02), 0 10px 24px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.18);
  border-image: url("/static/dashboard/img/filo-cristal-h-tenue.png?v=5") 100 120 100 120 / calc(var(--hx-h) * 0.417) calc(var(--hx-h) * 0.5) / 0 stretch;
}
.helix-app .helix-inbox-search::before, .helix-app .helix-inbox-search::after,
.helix-app .helix-canal-pills::before, .helix-app .helix-canal-pills::after,
.helix-app .helix-lead-detail-input::before, .helix-app .helix-lead-detail-input::after { content: none; }
.helix-app .helix-lead-detail-input { --hx-h: 38px; border-radius: 19px; background-color: rgba(0, 0, 0, 0.14); }
.helix-app .helix-lead-detail-input:focus { border: 0 solid transparent; outline: 0; box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.04), 0 0 0 3px rgba(10, 132, 255, 0.28), 0 10px 24px rgba(0, 0, 0, 0.28); }
.helix-app .helix-inbox-search:focus-within { box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.04), 0 0 0 4px var(--accent-ring), 0 10px 24px rgba(0, 0, 0, 0.28); }
.helix-app .helix-sidebar-item, .helix-app .helix-canal-pill, .helix-app .helix-vista-chip, .helix-app .helix-sheet-action { position: relative; z-index: 1; }
/* Refraccion de lente (Chrome) en las capsulas del chrome */
html.lente .helix-app .helix-sidebar::after,
html.lente .helix-app .helix-bottom-nav::after,
html.lente .helix-app .helix-btn--secondary::after { -webkit-backdrop-filter: url(#hx-lente-f) saturate(135%); backdrop-filter: url(#hx-lente-f) saturate(135%); }
html.lente .helix-app .helix-inbox-search,
html.lente .helix-app .helix-canal-pills,
html.lente .helix-app .helix-lead-detail-input { -webkit-backdrop-filter: url(#hx-lente-f) saturate(135%); backdrop-filter: url(#hx-lente-f) saturate(135%); }

/* =========================================================
   7. HOJAS, DIALOGOS Y TOASTS: piezas flotantes, densas, legibles
   ========================================================= */
.helix-app .helix-sheet-backdrop { background: rgba(0, 0, 0, 0.42); }
.helix-app .helix-sheet {
  --hx-h: 32px;
  position: relative; border: 0 solid transparent;
  border-radius: 18px 18px 0 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: rgba(26, 29, 34, 0.92);
  background-image: none;
  -webkit-backdrop-filter: blur(28px) saturate(120%); backdrop-filter: blur(28px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px rgba(0, 0, 0, 0.50);
  border-image: url("/static/dashboard/img/filo-cristal-h.png?v=5") 100 120 100 120 / calc(var(--hx-h) * 0.417) calc(var(--hx-h) * 0.5) / 0 stretch;
}
.helix-app .helix-sheet::before, .helix-app .helix-sheet::after { content: none; }
.helix-app .helix-sheet-header { margin: 0 0 10px; padding: 0 0 10px; background: transparent; border-bottom: 1px solid var(--hair); }
.helix-app .helix-sheet-header h3, .helix-app .helix-sheet-header .t-h3, .helix-app .helix-sheet-header .t-h4 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.helix-app .helix-sheet-section { margin-bottom: 10px; }
.helix-app .helix-sheet .t-eyebrow { font-size: 10.5px; letter-spacing: 0.07em; padding: 4px 0; color: var(--text-3); font-weight: 600; }
.helix-app .helix-sheet-actions { gap: 1px; }
.helix-app .helix-sheet-action { min-height: 36px; padding: 7px 10px; gap: 10px; border-radius: 8px; font-size: 13px; font-weight: 450; color: var(--text-1); }
.helix-app .helix-sheet-action svg { width: 16px; height: 16px; color: var(--text-3); }
.helix-app .helix-sheet-action:hover { background: rgba(255, 255, 255, 0.06); }
.helix-app .helix-sheet-action:hover svg { color: var(--text-1); }
.helix-app .helix-sheet-action--danger { color: var(--danger-text); }
.helix-app .helix-sheet-action--danger svg { color: var(--danger-text); }
.helix-app .helix-sheet-action--danger:hover { background: rgba(255, 69, 58, 0.14); }
.helix-app .helix-sheet-action.is-on { background: var(--lg-pulsado); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
.helix-app .helix-sheet-action.is-ocupado, .helix-app .helix-sheet-action.is-hecho { color: var(--text-1); }
.helix-app .helix-sheet-action--danger.is-ocupado, .helix-app .helix-sheet-action--danger.is-hecho { color: var(--danger-text); }
.helix-app .helix-sheet-action.is-ocupado::after, .helix-app .helix-sheet-action.is-hecho::after { left: auto; right: 14px; margin-left: 0; margin-top: -7px; }
.helix-app .helix-sheet-action.is-hecho::after { right: 18px; }
.helix-app .helix-sheet-action.is-hecho { background: var(--positive-bg); }
.helix-app .helix-sheet-footer { border-top: 1px solid var(--hair); padding-top: 10px; gap: 8px; }
.helix-app .helix-sheet-toggle-row { font-size: 13px; }
@media (min-width: 1024px) {
  .helix-app .helix-sheet-backdrop { align-items: center; padding: 24px; }
  .helix-app .helix-sheet { border-radius: 16px; max-width: 460px; max-height: min(84vh, 720px); padding: 14px 16px; }
  .helix-app .helix-sheet-backdrop > .helix-sheet { animation: hx-pop 320ms var(--ease-spring) both; }
}
/* Resumen pre-llamada: filas de datos, no tarjetas negras */
.helix-app .helix-info-section { padding: 0; margin: 0 0 14px; background: transparent; border: 0; box-shadow: none; }
.helix-app .helix-info-section:last-child { margin-bottom: 0; }
.helix-app .helix-info-lines { display: grid; gap: 0; font-size: 13px; line-height: 1.45; }
.helix-app .helix-info-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--hair); }
.helix-app .helix-info-lines > div:first-child { border-top: 0; }
.helix-app .helix-info-lines > div > .t-caption { color: var(--text-3); font-size: 12.5px; flex: 0 0 auto; }
.helix-app .helix-info-lines b { font-weight: 500; color: var(--text-1); text-align: right; }
.helix-app .helix-info-lines .helix-tag { display: inline-flex; width: fit-content; }
.helix-app .helix-info-form { display: grid; gap: 0; background: transparent; border: 0; box-shadow: none; padding: 0; }
.helix-app .helix-info-form-row {
  display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 12px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--hair); background: transparent; border-radius: 0; box-shadow: none;
  font-size: 13px; color: var(--text-1);
}
.helix-app .helix-info-form-row:first-child { border-top: 0; }
.helix-app .helix-info-form-row > .t-caption { color: var(--text-3); font-size: 12.5px; }
.helix-app .helix-empty { color: var(--text-3); font-size: 12.5px; }
/* Dialogo */
.helix-app .helix-dialog-backdrop { background: rgba(0, 0, 0, 0.42); }
.helix-app .helix-dialog { border-radius: 16px; padding: 18px 20px; max-width: 380px; animation: hx-pop 300ms var(--ease-spring) both; }
.helix-app .helix-dialog-titulo { font-size: 14.5px; letter-spacing: -0.012em; margin-bottom: 4px; }
.helix-app .helix-dialog-texto { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.helix-app .helix-dialog-botones { margin-top: 16px; gap: 8px; }
/* Toast */
.helix-toast { color: var(--text-1); padding: 9px 14px; border-radius: 999px; font-size: 12.5px; animation: hx-pop 300ms var(--ease-spring) both; text-shadow: var(--lg-texto-sombra); }
.helix-toast::after { background-color: rgba(28, 31, 36, 0.88); -webkit-backdrop-filter: blur(20px) saturate(120%); backdrop-filter: blur(20px) saturate(120%); }
.helix-app .helix-toast-accion, .helix-toast .helix-toast-accion { color: var(--accent-soft); font-size: 12.5px; }

/* =========================================================
   8. MARCA: render de cristal (Nano Banana Pro) + aro con los colores de la firma + glifo real
   ========================================================= */
.helix-app .helix-sidebar-brand .helix-brand-mark,
.helix-app .helix-mobile-header-logo.helix-brand-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: url("/static/dashboard/img/marca-cristal.png?v=2") center / 100% 100% no-repeat;
  box-shadow: none;
  isolation: isolate;
  overflow: visible;
}
.helix-app .helix-sidebar-brand .helix-brand-mark::after,
.helix-app .helix-mobile-header-logo.helix-brand-mark::after { content: none; }
.helix-app .helix-sidebar-brand .helix-brand-mark::before,
.helix-app .helix-mobile-header-logo.helix-brand-mark::before {
  content: "";
  position: absolute; inset: 2px; width: auto; height: auto; aspect-ratio: auto; top: 2px; left: 2px;
  transform: none;
  border-radius: 50%;
  padding: 1.5px;
  background: conic-gradient(from 0deg, #007AFF 0deg, #B84BFF 100deg, #FF6B35 200deg, #FF3B30 260deg, #007AFF 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  mix-blend-mode: normal;
  opacity: 0.95;
  z-index: 2;
  filter: none;
  animation: hx-aro 9s linear infinite;
}
@keyframes hx-aro { to { transform: rotate(360deg); } }
.helix-app .helix-sidebar-brand .helix-brand-mark svg,
.helix-app .helix-mobile-header-logo.helix-brand-mark svg {
  opacity: 1; width: 22px; height: 22px; color: #fff; position: relative; z-index: 3;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* =========================================================
   9. MOVIL: losas a sangre, barra inferior como capsula flotante
   ========================================================= */
@media (max-width: 1023px) {
  .helix-app .helix-mobile-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .helix-app .helix-tab-pane.is-active, .helix-app .helix-split-detail { border-radius: 0; box-shadow: none; }
  .helix-app .helix-shell:not(.inbox-active) .helix-tab-pane.is-active { padding: 14px 16px 100px; }
  .helix-app .helix-bottom-nav {
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    border-radius: 999px; padding: 6px 4px; border: 0; z-index: 50;
  }
  .helix-app .helix-content { padding-bottom: 84px; }
  .helix-app .helix-bottom-nav-item { border-radius: 999px; color: var(--text-3); min-height: 46px; font-size: 10.5px; }
  .helix-app .helix-mobile-header { padding: 8px 12px 6px; gap: 10px; }
  .helix-app .helix-mobile-header-title { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; }
  .helix-app .sig-underline::after { content: none; }
  .helix-app .helix-chat-bubble { max-width: 82%; }
  .helix-app .helix-lead-detail-chat { padding: 12px 10px; }
  .helix-app .helix-lead-detail-actionbar { justify-content: stretch; }
  .helix-app .helix-actionbar-btn { flex: 1 1 0; justify-content: center; }
  .helix-app .helix-bottom-nav-item.is-active,
  [data-theme="dark"] .helix-app .helix-bottom-nav-item.is-active { background: var(--lg-pulsado); color: var(--text-1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
}

/* =========================================================
   10. MOVIMIENTO: corto, con resorte donde algo aparece
   ========================================================= */
@keyframes hx-pop { from { opacity: 0; transform: translateY(6px) scale(0.965); } to { opacity: 1; transform: none; } }
@keyframes hx-fila-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.helix-app .helix-lead-row:nth-child(2) { animation-delay: 22ms; }
.helix-app .helix-lead-row:nth-child(3) { animation-delay: 44ms; }
.helix-app .helix-lead-row:nth-child(4) { animation-delay: 66ms; }
.helix-app .helix-lead-row:nth-child(5) { animation-delay: 88ms; }
.helix-app .helix-lead-row:nth-child(6) { animation-delay: 110ms; }
.helix-app .helix-lead-row:nth-child(7) { animation-delay: 132ms; }
.helix-app .helix-lead-row:nth-child(8) { animation-delay: 154ms; }
.helix-app .helix-lead-row:nth-child(n+9) { animation-delay: 176ms; }
.helix-app .helix-chat-bubble-row:nth-last-child(1) { animation-delay: 90ms; }
.helix-app .helix-chat-bubble-row:nth-last-child(2) { animation-delay: 60ms; }
.helix-app .helix-chat-bubble-row:nth-last-child(3) { animation-delay: 30ms; }
.helix-tab-pane.is-active { animation: hx-pane-in 260ms var(--ease-out) both; }
@keyframes hx-pane-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hx-skeleton .sk-row { height: 44px; border-radius: 10px; }
.hx-boot-fila { height: 44px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
  .helix-app .helix-lead-row, .helix-app .helix-chat-bubble-row, .helix-tab-pane.is-active,
  .helix-app .helix-sheet-backdrop > .helix-sheet, .helix-app .helix-dialog, .helix-toast { animation: none; }
  .helix-app .helix-sidebar-indicador { transition: none; }
  .helix-app .helix-brand-mark::before { animation: none; }
  .helix-app .helix-btn:active, .helix-app .helix-icon-btn:active, .helix-app .helix-sidebar-item:active { transform: none; }
}

/* =========================================================
   11. TEMA CLARO: gris perla satinado, losas blancas, cristal lechoso con filo
   oscuro de 1 px (los PNG del filo son luces blancas: fuera en claro).
   ========================================================= */
:root:not([data-theme="dark"]) #helix-bg {
  background-image:
    radial-gradient(60% 50% at 18% 8%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(170deg, #E9ECF0 0%, #D9DEE4 50%, #CBD1D8 100%);
  background-size: auto; background-position: 0 0;
  box-shadow: inset 0 0 160px 20px rgba(0, 0, 0, 0.05);
}
:root:not([data-theme="dark"]) .helix-app .helix-sidebar::after,
:root:not([data-theme="dark"]) .helix-app .helix-btn--secondary::after,
:root:not([data-theme="dark"]) .helix-app .helix-btn--primary::after,
:root:not([data-theme="dark"]) .helix-app .helix-btn--danger::after,
:root:not([data-theme="dark"]) .helix-app .helix-icon-btn::after,
:root:not([data-theme="dark"]) .helix-app .helix-lead-detail-send::after,
:root:not([data-theme="dark"]) .helix-app .helix-composer-btn::after,
:root:not([data-theme="dark"]) .helix-app .helix-heat-toggle::after,
:root:not([data-theme="dark"]) .helix-app .helix-bottom-nav::after,
:root:not([data-theme="dark"]) .helix-app .helix-dialog::after,
:root:not([data-theme="dark"]) .helix-toast::after {
  background-color: rgba(255, 255, 255, 0.60);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 45%, rgba(0, 0, 0, 0.02) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 20px rgba(20, 30, 45, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  border-image: none;
}
:root:not([data-theme="dark"]) .helix-app .helix-btn--secondary::after,
:root:not([data-theme="dark"]) .helix-app .helix-btn--danger::after,
:root:not([data-theme="dark"]) .helix-app .helix-icon-btn::after,
:root:not([data-theme="dark"]) .helix-app .helix-composer-btn::after,
:root:not([data-theme="dark"]) .helix-app .helix-heat-toggle::after {
  background-color: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 6px 14px rgba(20, 30, 45, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
}
:root:not([data-theme="dark"]) .helix-app .helix-btn--secondary:hover::after,
:root:not([data-theme="dark"]) .helix-app .helix-icon-btn:hover::after,
:root:not([data-theme="dark"]) .helix-app .helix-composer-btn:hover::after { background-color: rgba(255, 255, 255, 0.84); }
:root:not([data-theme="dark"]) .helix-app .helix-btn--danger:hover::after { background-color: rgba(255, 59, 48, 0.12); }
:root:not([data-theme="dark"]) .helix-app .helix-btn--primary::after,
:root:not([data-theme="dark"]) .helix-app .helix-lead-detail-send::after {
  background-color: rgba(0, 113, 240, 0.94);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 0 0 1px rgba(0, 60, 140, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 14px rgba(0, 122, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.08);
}
:root:not([data-theme="dark"]) .helix-app .helix-btn--primary:hover::after,
:root:not([data-theme="dark"]) .helix-app .helix-lead-detail-send:hover::after { background-color: rgba(0, 98, 214, 0.96); }
:root:not([data-theme="dark"]) .helix-app .helix-sidebar::after,
:root:not([data-theme="dark"]) .helix-app .helix-bottom-nav::after {
  background-color: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 12px 28px rgba(20, 30, 45, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* border-image: none ya viene de la regla generica del bloque */
:root:not([data-theme="dark"]) .helix-app .helix-dialog::after {
  background-color: rgba(255, 255, 255, 0.94);
  background-image: none;
  -webkit-backdrop-filter: blur(28px) saturate(120%); backdrop-filter: blur(28px) saturate(120%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), 0 2px 3px rgba(0, 0, 0, 0.06), 0 24px 56px rgba(20, 30, 45, 0.22);
}
:root:not([data-theme="dark"]) .helix-toast::after {
  background-color: rgba(255, 255, 255, 0.94);
  background-image: none;
  -webkit-backdrop-filter: blur(20px) saturate(120%); backdrop-filter: blur(20px) saturate(120%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), 0 8px 20px rgba(20, 30, 45, 0.16), 0 1px 2px rgba(0, 0, 0, 0.06);
}
:root:not([data-theme="dark"]) .helix-toast { text-shadow: none; }
:root:not([data-theme="dark"]) .helix-app .helix-sheet {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 24px 60px rgba(20, 30, 45, 0.25);
  border-image: none;
}
:root:not([data-theme="dark"]) .helix-app .helix-sheet-action:hover { background: rgba(0, 0, 0, 0.05); }
:root:not([data-theme="dark"]) .helix-app .helix-sheet-action.is-on { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10); }
:root:not([data-theme="dark"]) .helix-app .helix-inbox-search,
:root:not([data-theme="dark"]) .helix-app .helix-canal-pills,
:root:not([data-theme="dark"]) .helix-app .helix-lead-detail-input {
  background-color: rgba(255, 255, 255, 0.64);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(0, 0, 0, 0.02) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 20px rgba(20, 30, 45, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  border-image: none;
}
:root:not([data-theme="dark"]) .helix-app .helix-lead-detail-input { background-color: rgba(255, 255, 255, 0.78); }
:root:not([data-theme="dark"]) .helix-app .helix-lead-detail-input:focus { box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.55), 0 0 0 3px rgba(0, 122, 255, 0.22), 0 8px 20px rgba(20, 30, 45, 0.10); }
:root:not([data-theme="dark"]) .helix-app .helix-inbox-search:focus-within { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), 0 0 0 4px var(--accent-ring), 0 8px 20px rgba(20, 30, 45, 0.10); }
:root:not([data-theme="dark"]) .helix-app .helix-canal-pill.is-on,
:root:not([data-theme="dark"]) .helix-app .helix-vista-chip.is-on,
:root:not([data-theme="dark"]) .helix-app .helix-sidebar-indicador {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.05) 55%, rgba(255, 255, 255, 0.30) 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.70), 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.60);
}
:root:not([data-theme="dark"]) .helix-app .helix-canal-pill:hover,
:root:not([data-theme="dark"]) .helix-app .helix-vista-chip:hover { background: rgba(0, 0, 0, 0.05); }
:root:not([data-theme="dark"]) .helix-app .helix-btn,
:root:not([data-theme="dark"]) .helix-app .helix-sheet-action,
:root:not([data-theme="dark"]) .helix-app .helix-sidebar-item,
:root:not([data-theme="dark"]) .helix-app .helix-canal-pill,
:root:not([data-theme="dark"]) .helix-app .helix-vista-chip,
:root:not([data-theme="dark"]) .helix-toast { text-shadow: none; }
:root:not([data-theme="dark"]) .helix-app .helix-subnav { box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 2px rgba(0, 0, 0, 0.08); }
:root:not([data-theme="dark"]) .helix-app .helix-subnav-btn.is-active { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.10); }
:root:not([data-theme="dark"]) .helix-app .hx-choice:has(input:checked) { box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.45); }
:root:not([data-theme="dark"]) .helix-app .helix-setting-option.is-active { box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.45); }
:root:not([data-theme="dark"]) .helix-app .hx-card.is-unread { box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.45); }
:root:not([data-theme="dark"]) .helix-app .hx-field:focus,
:root:not([data-theme="dark"]) .helix-app .helix-input:focus { box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.60), 0 0 0 3px var(--accent-ring); }
:root:not([data-theme="dark"]) .helix-app .hx-field,
:root:not([data-theme="dark"]) .helix-app input.hx-field,
:root:not([data-theme="dark"]) .helix-app textarea.hx-field,
:root:not([data-theme="dark"]) .helix-app select.hx-field,
:root:not([data-theme="dark"]) .helix-app .helix-input {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
:root:not([data-theme="dark"]) .helix-app .hx-stepper { box-shadow: inset 0 0 0 1px var(--hair-strong), inset 0 1px 2px rgba(0, 0, 0, 0.06); }
:root:not([data-theme="dark"]) .helix-app .hx-switch-track { background: rgba(0, 0, 0, 0.14); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
:root:not([data-theme="dark"]) .helix-app .hx-switch-thumb { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
:root:not([data-theme="dark"]) .helix-app .hx-switch input:checked ~ .hx-switch-track { background: #007AFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
:root:not([data-theme="dark"]) .helix-app .helix-lead-row.is-active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
:root:not([data-theme="dark"]) .helix-app .helix-lead-row .helix-tag,
:root:not([data-theme="dark"]) .helix-app .helix-tag,
:root:not([data-theme="dark"]) .helix-app .hx-tag { background: rgba(0, 0, 0, 0.055); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
:root:not([data-theme="dark"]) .helix-app .helix-lead-row .helix-tag--neutral,
:root:not([data-theme="dark"]) .helix-app .helix-tag--neutral { background: rgba(0, 0, 0, 0.055); }
:root:not([data-theme="dark"]) .helix-app .helix-lead-row .helix-tag--accent,
:root:not([data-theme="dark"]) .helix-app .helix-tag--accent,
:root:not([data-theme="dark"]) .helix-app .helix-tag--signal { background: rgba(0, 122, 255, 0.12); }
:root:not([data-theme="dark"]) .helix-app .hx-unread { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
:root:not([data-theme="dark"]) .helix-app .helix-avatar {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.10);
}
:root:not([data-theme="dark"]) .helix-app .helix-heat-pill--cliente { background: rgba(31, 122, 63, 0.12); color: #1F7A3F; }
:root:not([data-theme="dark"]) .helix-app .helix-chat-bubble { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05); }
:root:not([data-theme="dark"]) .helix-app .helix-chat-bubble--lead { background: #FFFFFF; }
:root:not([data-theme="dark"]) .helix-app .helix-chat-bubble--ia,
:root:not([data-theme="dark"]) .helix-app .helix-chat-bubble--alex { background: rgba(0, 122, 255, 0.13); }
:root:not([data-theme="dark"]) .helix-app .helix-chat-trailing-time { color: rgba(27, 31, 36, 0.50); }
:root:not([data-theme="dark"]) .helix-app .helix-status-manual { color: rgba(27, 31, 36, 0.65); }
:root:not([data-theme="dark"]) .helix-app .helix-tick { color: rgba(27, 31, 36, 0.42); }
:root:not([data-theme="dark"]) .helix-app .helix-tick--read { color: #1E9AD6; }
:root:not([data-theme="dark"]) .helix-app .helix-chat-nuevos::before,
:root:not([data-theme="dark"]) .helix-app .helix-chat-nuevos::after { background: rgba(0, 122, 255, 0.35); }
:root:not([data-theme="dark"]) .helix-app .helix-chat-puntos i { background: rgba(27, 31, 36, 0.55); }
:root:not([data-theme="dark"]) .helix-app .helix-chat-link { text-decoration-color: rgba(27, 31, 36, 0.35); }
:root:not([data-theme="dark"]) .helix-app .helix-chat-bubble--ia .helix-chat-link,
:root:not([data-theme="dark"]) .helix-app .helix-chat-bubble--alex .helix-chat-link { color: #0B5CC7; }
:root:not([data-theme="dark"]) .helix-app .helix-chat-bajar {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(20, 30, 45, 0.18);
}
:root:not([data-theme="dark"]) .helix-app .helix-sheet-backdrop,
:root:not([data-theme="dark"]) .helix-app .helix-dialog-backdrop { background: rgba(15, 20, 28, 0.30); }
:root:not([data-theme="dark"]) .helix-app .helix-sidebar-brand .helix-brand-mark,
:root:not([data-theme="dark"]) .helix-app .helix-mobile-header-logo.helix-brand-mark {
  background: radial-gradient(120% 120% at 32% 22%, #FFFFFF 0%, #EEF1F5 45%, #C9D0D9 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), inset 0 -2px 4px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(20, 30, 45, 0.14);
}
:root:not([data-theme="dark"]) .helix-app .helix-sidebar-brand .helix-brand-mark svg,
:root:not([data-theme="dark"]) .helix-app .helix-mobile-header-logo.helix-brand-mark svg { color: #1B1F24; filter: none; }
:root:not([data-theme="dark"]) .helix-app .helix-heat-toggle.is-on::after { background-color: rgba(0, 0, 0, 0.07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(0, 0, 0, 0.10); }
@media (max-width: 1023px) {
  :root:not([data-theme="dark"]) .helix-app .helix-bottom-nav-item.is-active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10), inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
}

/* =========================================================
   12. ACCESO (login, registro, paywall, confirmando pago): misma escena
   que el panel. helix-screens.css la pintaba con blobs de color, halo
   violeta, sheen y logo con gradiente; aqui se alinea con el material v3.
   Fondo: el propio #helix-bg (grafito satinado) visto a traves de la
   pantalla, que pasa a ser transparente. Tarjeta: losa plana, no cristal.
   Campos: hundidos. Boton: capsula azul con la receta de .helix-btn--primary.
   Marca: el mismo render de cristal + aro de la firma que la barra lateral.
   ========================================================= */
.helix-login {
  --hl-sombra: 0 30px 70px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --hl-brillo: rgba(255, 255, 255, 0.06);
  --hl-btn-bg: rgba(10, 132, 255, 0.55);
  --hl-btn-bg-hover: rgba(30, 145, 255, 0.65);
  background: transparent;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: -0.008em;
}
:root:not([data-theme="dark"]) .helix-login {
  --hl-sombra: 0 30px 70px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.06);
  --hl-brillo: rgba(255, 255, 255, 0.60);
  --hl-btn-bg: rgba(0, 122, 255, 0.90);
  --hl-btn-bg-hover: rgba(0, 102, 214, 0.95);
}
/* Decoracion antigua fuera: blobs de color, particulas, ruido propio, vineta y halo */
.helix-login .hl-bg,
.helix-login .hl-sparks,
.helix-login .hl-noise,
.helix-login .hl-vignette,
.helix-login .hl-halo { display: none; }
/* Tarjeta: losa plana (misma receta que .helix-tab-pane.is-active) con sombra larga */
.helix-login .hl-card {
  width: min(100%, 400px);
  padding: 36px 32px 28px;
  border: 0;
  border-radius: var(--r-slab);
  background: var(--slab-bg);
  background-image: none;
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  backdrop-filter: blur(24px) saturate(120%);
  box-shadow: inset 0 1px 0 var(--hl-brillo), 0 0 0 1px var(--slab-line), var(--hl-sombra);
  animation: hl-fade 260ms var(--ease-out) both;
}
.helix-login .hl-card::before { content: none; }
@keyframes hl-fade { from { opacity: 0; } to { opacity: 1; } }
/* Marca: render de cristal + aro con los colores de la firma + glifo real (como .helix-brand-mark) */
.helix-login .hl-mark {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: visible;
  color: #fff;
  background: url("/static/dashboard/img/marca-cristal.png?v=2") center / 100% 100% no-repeat;
  box-shadow: none;
  animation: none;
}
.helix-login .hl-mark::after { content: none; }
.helix-login .hl-mark::before {
  content: "";
  position: absolute; inset: 2px; width: auto; height: auto; aspect-ratio: auto;
  transform: none;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 0deg, #007AFF 0deg, #B84BFF 100deg, #FF6B35 200deg, #FF3B30 260deg, #007AFF 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.95;
  z-index: 2;
  filter: none;
  animation: hx-aro 9s linear infinite;
}
.helix-login .hl-mark svg { width: 28px; height: 28px; z-index: 3; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
/* Tipografia */
.helix-login .hl-title { font-size: 22px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.15; color: var(--text-1); }
.helix-login .hl-sub { font-size: 13px; line-height: 1.45; color: var(--text-3); margin: 6px 0 0; }
.helix-login .t-caption { font-size: 12px; font-weight: 500; color: var(--text-3); }
.helix-login a { color: var(--accent-soft); text-decoration: none; }
.helix-login a:hover { text-decoration: underline; }
.helix-login form { margin-top: 22px; gap: 10px; }
/* Campos: hundidos y planos (misma receta que .hx-field) */
.helix-login input:not([type="checkbox"]) {
  height: 44px; padding: 0 14px;
  border: 0; border-radius: 8px;
  color: var(--text-1);
  background: var(--sunken-bg);
  box-shadow: inset 0 0 0 1px var(--hair-strong), inset 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.helix-login input::placeholder { color: var(--text-3); }
.helix-login input:not([type="checkbox"]):focus {
  outline: 0; border: 0;
  background: var(--sunken-bg);
  box-shadow: inset 0 0 0 1px rgba(120, 180, 255, 0.55), 0 0 0 3px var(--accent-ring);
}
.helix-login input[type="checkbox"] { width: auto; height: auto; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--accent); }
/* Boton: capsula azul de cristal (receta de .helix-btn--primary, filo renderizado) */
.helix-login .hl-btn {
  --hx-h: 44px;
  position: relative; isolation: isolate;
  height: 44px; margin-top: 6px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: transparent; background-image: none;
  box-shadow: none;
  color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -0.006em;
  text-shadow: var(--lg-texto-sombra);
  transition: transform 90ms var(--ease-out);
}
.helix-login .hl-btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background-color: var(--hl-btn-bg);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 45%, rgba(0, 0, 0, 0.05) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  backdrop-filter: blur(10px) saturate(135%);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.18);
  border: 0 solid transparent;
  border-image: url("/static/dashboard/img/filo-cristal-h.png?v=5") 100 120 100 120 / calc(var(--hx-h) * 0.417) calc(var(--hx-h) * 0.5) / 0 stretch;
  transition: background-color var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.helix-login .hl-btn:hover { filter: none; box-shadow: none; transform: none; }
.helix-login .hl-btn:hover::after { background-color: var(--hl-btn-bg-hover); }
.helix-login .hl-btn:active { transform: scale(0.97); }
.helix-login .hl-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.helix-login .hl-btn:disabled { opacity: 0.6; cursor: default; }
/* Error: mismo rojo de sistema que el panel */
.helix-login .helix-login-err { color: var(--danger-text); font-size: 12.5px; margin-top: 10px; }
@media (max-width: 480px) {
  .helix-login .hl-card { padding: 32px 22px 26px; }
}
/* Tema claro: la marca del acceso como la de la barra (esfera clara, glifo oscuro) */
:root:not([data-theme="dark"]) .helix-login .hl-mark {
  background: radial-gradient(120% 120% at 32% 22%, #FFFFFF 0%, #EEF1F5 45%, #C9D0D9 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), inset 0 -2px 4px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(20, 30, 45, 0.14);
  color: #1B1F24;
}
:root:not([data-theme="dark"]) .helix-login .hl-mark svg { filter: none; }
:root:not([data-theme="dark"]) .helix-login .hl-btn::after {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 0 0 1px rgba(0, 60, 140, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 14px rgba(0, 122, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.08);
  border-image: none;
}

/* =========================================================
   13. MOVIL (auditoria 2026-09-04): zonas seguras, chat a pantalla completa,
   objetivos tactiles de 44 px, sin zoom de iOS al enfocar, menos desenfoques.
   ========================================================= */
.helix-app { -webkit-tap-highlight-color: transparent; }
.helix-app .helix-lead-row, .helix-app .helix-bottom-nav-item { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.helix-app .helix-lead-row:active { background: var(--lg-pulsado); }
.helix-app .helix-content, .helix-app .helix-lead-detail-chat { overscroll-behavior-y: contain; }
/* Hoja de la agenda: es un overlay, no una tarjeta de contenido */
.helix-app .hx-agenda-sheet-card {
  background: rgba(26, 29, 34, 0.92); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px rgba(0, 0, 0, 0.50);
  -webkit-backdrop-filter: blur(28px) saturate(120%); backdrop-filter: blur(28px) saturate(120%);
}
:root:not([data-theme="dark"]) .helix-app .hx-agenda-sheet-card { background: rgba(255, 255, 255, 0.94); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), 0 24px 60px rgba(20, 30, 45, 0.25); }
@media (max-width: 760px) {
  .helix-app .hx-agenda-sheet-card { border-radius: 0; max-height: 100dvh; padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
/* Pildora de tirar para actualizar: misma piel que el toast */
.helix-ptr { background: rgba(28, 31, 36, 0.92); border: 0; color: var(--text-1); font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--hair-strong), 0 8px 18px rgba(0, 0, 0, 0.30); }
@media (max-width: 1023px) {
  /* Barra inferior: 58 px reales; hueco del contenido con zona segura */
  .helix-app .helix-bottom-nav { --hx-h: 58px; }
  .helix-app .helix-content { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .helix-app .helix-shell:not(.inbox-active) .helix-tab-pane.is-active { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .helix-app .helix-shell.inbox-active .helix-content { border-radius: 0; box-shadow: none; }
  .helix-app .helix-mobile-header { padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); }
  /* Chat a pantalla completa: sin barra inferior ni cabecera de seccion mientras se lee un lead */
  .helix-app .helix-shell:has(.helix-content > .helix-lead-detail) .helix-bottom-nav { display: none; }
  .helix-app .helix-workspace:has(.helix-content > .helix-lead-detail) .helix-mobile-header { display: none; }
  .helix-app .helix-content:has(> .helix-lead-detail) { padding-bottom: 0; }
  .helix-app .helix-shell:not(.inbox-active) .helix-tab-pane.is-active:has(> .helix-lead-detail) { padding: 0; }
  .helix-app .helix-lead-detail-header { padding: 5px 12px 5px 6px; padding-top: calc(5px + env(safe-area-inset-top)); }
  .helix-app .helix-chat-bajar { bottom: calc(124px + env(safe-area-inset-bottom)); }
  /* iOS hace zoom al enfocar campos de menos de 16 px */
  .helix-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  .helix-app textarea,
  .helix-app select { font-size: 16px; }
  .helix-app .helix-lead-detail-input { height: 40px; min-height: 40px; line-height: 1.3; font-size: 16px; --hx-h: 40px; border-radius: 20px; }
  /* Objetivos tactiles de 44 px (HIG / WCAG 2.5.5) */
  .helix-app .helix-icon-btn { min-width: 44px; min-height: 44px; --hx-h: 44px; }
  .helix-app .helix-composer-btn,
  .helix-app .helix-lead-detail-send, .helix-app .helix-lead-detail-send:hover { width: 40px; height: 40px; min-width: 40px; min-height: 40px; --hx-h: 40px; }
  .helix-app .helix-composer-btn::before, .helix-app .helix-lead-detail-send::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; }
  .helix-app .helix-btn--sm { min-height: 40px; --hx-h: 40px; }
  .helix-app .helix-btn--md { min-height: 44px; --hx-h: 44px; }
  .helix-app .helix-canal-pills { --hx-h: 48px; padding: 4px; }
  .helix-app .helix-canal-pill, .helix-app .helix-vista-chip { min-height: 40px; }
  .helix-app .helix-subnav-btn { min-height: 40px; }
  .helix-app .helix-sheet-action { min-height: 44px; padding: 9px 12px; font-size: 14px; }
  .helix-app .helix-heat-toggle { min-height: 44px; --hx-h: 44px; }
  /* Tipografia informativa legible en 390 px */
  .helix-app .helix-chat-bubble { font-size: 15px; }
  .helix-app .helix-chat-trailing-time, .helix-app .helix-chat-day-divider-label,
  .helix-app .helix-inbox-section-label-muted, .helix-app .helix-kpi-v2-label,
  .helix-app .helix-sheet .t-eyebrow, .helix-app .hx-unread { font-size: 11px; }
  .helix-app .helix-lead-row .helix-tag, .helix-app .helix-tag, .helix-app .hx-tag { font-size: 11px; height: 20px; }
  .helix-app .helix-row-time, .helix-app .helix-lead-detail-phone { font-size: 12px; }
  .helix-toast, .helix-app .helix-toast-accion { font-size: 13px; }
  /* Hojas desde abajo: cabecera sticky opaca y filo sin esquinas inferiores */
  .helix-app .helix-sheet { border-image-width: calc(var(--hx-h) * 0.417) calc(var(--hx-h) * 0.5) 0; background: rgba(26, 29, 34, 0.95); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); }
  .helix-app .helix-sheet-header { background: rgba(26, 29, 34, 0.96); margin: 0 -16px 10px; padding: 0 16px 10px; }
  :root:not([data-theme="dark"]) .helix-app .helix-sheet-header { background: rgba(255, 255, 255, 0.96); }
  .helix-app .helix-dialog-backdrop:has(.helix-dialog-campo) { align-items: flex-start; padding-top: calc(40px + env(safe-area-inset-top)); }
  /* Rendimiento: sobre grafito plano el desenfoque de las losas y de los controles no aporta */
  .helix-app .helix-tab-pane.is-active,
  .helix-app .helix-split-detail,
  .helix-app .helix-shell.inbox-active .helix-content { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .helix-app .helix-inbox-search, .helix-app .helix-canal-pills, .helix-app .helix-lead-detail-input,
  html.lente .helix-app .helix-inbox-search, html.lente .helix-app .helix-canal-pills, html.lente .helix-app .helix-lead-detail-input,
  .helix-app .helix-btn--secondary::after, .helix-app .helix-btn--primary::after, .helix-app .helix-btn--danger::after,
  .helix-app .helix-icon-btn::after, .helix-app .helix-lead-detail-send::after, .helix-app .helix-composer-btn::after,
  .helix-app .helix-heat-toggle::after, html.lente .helix-app .helix-btn--secondary::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.lente .helix-app .helix-bottom-nav::after { -webkit-backdrop-filter: blur(14px) saturate(135%); backdrop-filter: blur(14px) saturate(135%); }
}

/* =========================================================
   14. REVISION ADVERSARIAL (2026-09-04): contraste, rendimiento, movimiento
   reducido, tactil en cualquier tamano y detalles sueltos.
   ========================================================= */
[data-theme="dark"] { --text-3: #8A9099; }
.helix-app .hx-unread { background: #1668D9; font-size: 11px; font-weight: 700; }
.helix-app *:focus-visible { outline: 2px solid rgba(10, 132, 255, 0.90); outline-offset: 2px; }
:root:not([data-theme="dark"]) .helix-app *:focus-visible { outline-color: rgba(0, 100, 214, 0.90); }
:root:not([data-theme="dark"]) .helix-app .helix-chat-trailing-time { color: rgba(27, 31, 36, 0.66); }
:root:not([data-theme="dark"]) .helix-app .helix-tick { color: rgba(27, 31, 36, 0.60); }
:root:not([data-theme="dark"]) .helix-app .helix-btn--primary::after,
:root:not([data-theme="dark"]) .helix-app .helix-lead-detail-send::after,
:root:not([data-theme="dark"]) .helix-login .hl-btn::after { background-color: rgba(0, 100, 214, 0.96); }
/* Rendimiento: debajo de las losas y de los controles solo hay grafito plano; el desenfoque
   no cambia nada y cuesta un compositor por capa. Se queda donde pasa contenido por debajo:
   barra lateral, barra inferior, hojas, dialogos y toasts. */
.helix-app .helix-tab-pane.is-active, .helix-app .helix-split-detail, .helix-app .helix-shell.inbox-active .helix-content { -webkit-backdrop-filter: none; backdrop-filter: none; }
.helix-app .helix-inbox-search, .helix-app .helix-canal-pills, .helix-app .helix-lead-detail-input,
html.lente .helix-app .helix-inbox-search, html.lente .helix-app .helix-canal-pills, html.lente .helix-app .helix-lead-detail-input,
.helix-app .helix-btn--secondary::after, .helix-app .helix-btn--primary::after, .helix-app .helix-btn--danger::after,
.helix-app .helix-icon-btn::after, .helix-app .helix-lead-detail-send::after, .helix-app .helix-composer-btn::after,
.helix-app .helix-heat-toggle::after, html.lente .helix-app .helix-btn--secondary::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) {
  .helix-app .helix-sidebar-brand .helix-brand-mark::before, .helix-app .helix-mobile-header-logo.helix-brand-mark::before, .helix-login .hl-mark::before { animation: none; }
  .helix-app .helix-chat-puntos i { animation: none; opacity: 0.8; }
}
.helix-app .helix-chat-bajar { visibility: hidden; }
.helix-app .helix-chat-bajar.is-visible { visibility: visible; }
.helix-app .helix-actionbar-btn.is-done { color: var(--positive); }
:root:not([data-theme="dark"]) .helix-ptr { background: rgba(255, 255, 255, 0.94); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 8px 18px rgba(20, 30, 45, 0.16); }
.helix-app .helix-sheet-header { background: rgba(26, 29, 34, 0.96); margin: 0 -16px 10px; padding: 0 16px 10px; }
:root:not([data-theme="dark"]) .helix-app .helix-sheet-header { background: rgba(255, 255, 255, 0.96); }
.helix-app .helix-heat-toggle { min-height: 30px; }
.helix-app .helix-tab-pane.is-active[data-tab="crm"] { padding: 0; }
.hx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (pointer: coarse) {
  .helix-app .helix-icon-btn { min-width: 44px; min-height: 44px; --hx-h: 44px; }
  .helix-app .helix-btn--sm { min-height: 40px; --hx-h: 40px; }
  .helix-app .helix-btn--md { min-height: 44px; --hx-h: 44px; }
  .helix-app .helix-heat-toggle { min-height: 44px; --hx-h: 44px; }
  .helix-app .helix-canal-pill, .helix-app .helix-vista-chip, .helix-app .helix-subnav-btn { min-height: 40px; }
  .helix-app .helix-sheet-action { min-height: 44px; }
}
@media (max-width: 1023px) {
  .helix-app .helix-chat-bajar { width: 40px; height: 40px; }
  .helix-app .helix-sheet { --hx-h: 36px; }
  .helix-login input:not([type="checkbox"]) { font-size: 16px; }
  .helix-app .helix-lead-detail-header { padding-top: 5px; }
  .helix-app .helix-workspace:has(.helix-content > .helix-lead-detail) .helix-lead-detail-header { padding-top: calc(5px + env(safe-area-inset-top)); }
}

/* =========================================================
   15. MOVIMIENTO v2 (2026-09-04, Alex: "que se sienta fluido") y menos blanco
   en las capsulas grandes (filo tenue, alfa 0,45).
   ========================================================= */
.helix-app .helix-bottom-nav::after {
  border-image-source: url("/static/dashboard/img/filo-cristal-h-tenue.png?v=5");
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 24px rgba(0, 0, 0, 0.30);
}
/* Cambio de pestana direccional: el pane entra desde el lado hacia el que se navega */
.helix-tab-pane.is-active[data-dir="der"] { animation: hx-pane-der 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.helix-tab-pane.is-active[data-dir="izq"] { animation: hx-pane-izq 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes hx-pane-der { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes hx-pane-izq { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
/* Barra inferior: pildora deslizante (como la de la barra lateral) y pulsacion */
.helix-app .helix-bottom-nav { position: fixed; }
.helix-app .helix-bottom-nav-item { position: relative; z-index: 1; transition: color 180ms var(--ease-out); }
.helix-app .helix-bottom-nav-item.is-active,
[data-theme="dark"] .helix-app .helix-bottom-nav-item.is-active { background: transparent; box-shadow: none; }
.helix-app .helix-bottom-nav-item svg { transition: transform 160ms var(--ease-out); }
.helix-app .helix-bottom-nav-item:active svg { transform: scale(0.86); }
.helix-app .helix-bottom-nav-item.is-active svg { animation: hx-icono-pop 360ms var(--ease-spring) both; }
@keyframes hx-icono-pop { 0% { transform: scale(0.82); } 60% { transform: scale(1.12); } 100% { transform: none; } }
.helix-app .helix-bottom-nav-indicador {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.12) 55%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.12);
  opacity: 0; z-index: 0; pointer-events: none;
  transition: transform 420ms var(--ease-spring), width 200ms var(--ease-out), opacity 160ms var(--ease-out);
  will-change: transform;
}
:root:not([data-theme="dark"]) .helix-app .helix-bottom-nav-indicador {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.05) 55%, rgba(255, 255, 255, 0.30) 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.70), 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.60);
}
/* Enviar: pulsacion */
.helix-app .helix-lead-detail-send { transition: transform 120ms var(--ease-out); }
.helix-app .helix-lead-detail-send:active { transform: scale(0.90); }
.helix-app .helix-actionbar-btn { transition: background 140ms var(--ease-out), transform 120ms var(--ease-out); }
.helix-app .helix-actionbar-btn:active { transform: scale(0.96); }
.helix-app .helix-lead-row { transition: background 140ms var(--ease-out); }
@media (max-width: 1023px) {
  /* El chat entra desde la derecha como una pantalla (iOS push) y la bandeja vuelve desde la izquierda */
  .helix-app .helix-anim-lead-in { animation: hx-push 340ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes hx-push { from { transform: translateX(100%); box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35); } to { transform: none; box-shadow: none; } }
  .helix-app .helix-tab-pane.hx-vuelve { animation: hx-pop-atras 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes hx-pop-atras { from { transform: translateX(-26%); opacity: 0.6; } to { transform: none; opacity: 1; } }
  /* Hojas: suben con curva iOS (sin rebote) y el velo funde */
  .helix-app .helix-sheet-backdrop > .helix-sheet { animation: hx-hoja-sube 360ms cubic-bezier(0.2, 0.9, 0.25, 1) both; }
  @keyframes hx-hoja-sube { from { transform: translateY(100%); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .helix-tab-pane.is-active[data-dir], .helix-app .helix-anim-lead-in, .helix-app .helix-tab-pane.hx-vuelve,
  .helix-app .helix-sheet-backdrop > .helix-sheet, .helix-app .helix-bottom-nav-item.is-active svg { animation: none; }
  .helix-app .helix-bottom-nav-indicador { transition: none; }
}

/* =========================================================
   16. HOY Y PRIMER DIA (2026-09-04): orientacion del coach al entrar.
   Tarjetas planas dentro de la columna de la bandeja (nunca cristal).
   ========================================================= */
.helix-app .helix-hoy-caja { margin: 0 12px 8px; display: grid; gap: 8px; }
.helix-app .helix-hoy-caja[hidden] { display: none; }
.helix-app .helix-hoy, .helix-app .helix-primeros {
  background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-line); border-radius: var(--r-card);
  padding: 8px 10px; animation: hx-fila-in 320ms var(--ease-out) both;
}
.helix-app .helix-hoy-titulo, .helix-app .helix-primeros-titulo { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin: 2px 2px 4px; }
.helix-app .helix-hoy-linea {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 4px 6px;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-1); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  transition: background 140ms var(--ease-out), transform 120ms var(--ease-out);
}
.helix-app .helix-hoy-linea:hover { background: var(--layer-2); }
.helix-app .helix-hoy-linea:active { transform: scale(0.985); }
.helix-app .helix-hoy-linea > svg:first-child { color: var(--accent-soft); flex: none; }
.helix-app .helix-hoy-linea > svg:last-child { color: var(--text-3); margin-left: auto; flex: none; }
.helix-app .helix-hoy-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(10, 132, 255, 0.18); color: var(--accent-soft); font-size: 12px; font-weight: 600; flex: none; }
.helix-app .helix-hoy-texto { flex: 1 1 auto; min-width: 0; }
.helix-app .helix-hoy.is-vacio { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.helix-app .helix-hoy.is-vacio .helix-hoy-titulo { margin: 0; }
.helix-app .helix-hoy-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.helix-app .helix-hoy-ok svg { color: var(--positive); }
.helix-app .helix-primeros-cab { display: flex; align-items: baseline; justify-content: space-between; }
.helix-app .helix-primeros-titulo { text-transform: none; letter-spacing: -0.006em; font-size: 13px; color: var(--text-1); margin: 0 2px 6px; }
.helix-app .helix-primeros-n { font-size: 12px; color: var(--text-3); }
.helix-app .helix-primeros-barra { height: 4px; border-radius: 999px; background: var(--layer-3); overflow: hidden; margin: 0 2px 8px; }
.helix-app .helix-primeros-barra i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 600ms var(--ease-out); }
.helix-app .helix-primeros-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.helix-app .helix-primeros-sig { font-size: 12.5px; color: var(--text-2); min-width: 0; }
.helix-app .helix-primeros-linea {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 3px 6px; margin: -2px 0 6px;
  border: 0; border-radius: 8px; background: transparent; color: var(--text-1); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  transition: background 140ms var(--ease-out), transform 120ms var(--ease-out);
}
.helix-app .helix-primeros-linea:hover { background: var(--layer-2); }
.helix-app .helix-primeros-linea:active { transform: scale(0.985); }
.helix-app .helix-primeros-linea > svg:first-child { color: var(--accent-soft); flex: none; }
.helix-app .helix-primeros-linea > svg:last-child { color: var(--text-3); flex: none; }
.helix-app .helix-primeros-texto { flex: 1 1 auto; min-width: 0; }
.helix-app .helix-primeros-accion { color: var(--accent-soft); font-weight: 600; font-size: 12.5px; flex: none; }
.helix-app .helix-empty.is-accion { padding: 28px 18px 24px; text-align: center; }
.helix-app .helix-vacio-titulo { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
.helix-app .helix-vacio-texto { font-size: 13px; color: var(--text-2); line-height: 1.5; max-width: 340px; margin: 0 auto 14px; }
.helix-app .helix-vacio-botones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
:root:not([data-theme="dark"]) .helix-app .helix-hoy-n { background: rgba(0, 122, 255, 0.12); }

/* =========================================================
   17. TOUR Y AYUDA (2026-09-04): boton "?" en las cabeceras, hoja de ayuda por
   pantalla y tour de tres pasos con foco sobre el elemento.
   ========================================================= */
.helix-app .helix-topbar-actions { display: flex; align-items: center; gap: 8px; }
.helix-app .helix-ayuda-btn { min-width: 32px; min-height: 32px; padding: 6px; --hx-h: 32px; color: var(--text-3); }
.helix-app .helix-ayuda-btn:hover { color: var(--text-1); }
.helix-app .helix-mobile-header .helix-ayuda-btn { margin-left: auto; }
.helix-app .helix-ayuda-texto { margin: 2px 2px 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.helix-app .helix-tour { position: fixed; inset: 0; z-index: 9400; }
.helix-app .helix-tour-velo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.40); animation: hx-velo-in 220ms var(--ease-out) both; }
@keyframes hx-velo-in { from { opacity: 0; } to { opacity: 1; } }
.helix-app .helix-tour-foco {
  position: absolute; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.95), 0 0 0 6px rgba(10, 132, 255, 0.22), 0 0 0 9999px rgba(0, 0, 0, 0.40);
  transition: left 320ms var(--ease-spring), top 320ms var(--ease-spring), width 320ms var(--ease-spring), height 320ms var(--ease-spring);
}
.helix-app .helix-tour-foco[hidden] { display: none; }
.helix-app .helix-tour:has(.helix-tour-foco:not([hidden])) .helix-tour-velo { background: transparent; }
.helix-app .helix-tour-tarjeta {
  position: absolute; width: min(320px, calc(100vw - 24px)); padding: 14px 16px 12px;
  border-radius: 14px; background: rgba(28, 31, 36, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.10), 0 24px 56px rgba(0, 0, 0, 0.50);
  transition: top 320ms var(--ease-spring), left 320ms var(--ease-spring);
}
.helix-app .helix-tour-tarjeta.hx-tour-in { animation: hx-pop 300ms var(--ease-spring) both; }
.helix-app .helix-tour-n { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 11px; color: var(--text-3); }
.helix-app .helix-tour-barra { flex: 1 1 auto; height: 3px; border-radius: 999px; background: var(--layer-3); overflow: hidden; }
.helix-app .helix-tour-barra i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 320ms var(--ease-out); }
.helix-app .helix-tour-titulo { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; margin-bottom: 4px; }
.helix-app .helix-tour-texto { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.helix-app .helix-tour-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
:root:not([data-theme="dark"]) .helix-app .helix-tour-tarjeta { background: rgba(255, 255, 255, 0.96); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), 0 24px 56px rgba(20, 30, 45, 0.25); }
@media (max-width: 1023px) {
  .helix-app .helix-tour-tarjeta { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); transform: none; }
  .helix-app .helix-tour:has(.helix-tour-foco:not([hidden])) .helix-tour-tarjeta { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .helix-app .helix-tour-velo, .helix-app .helix-tour-tarjeta.hx-tour-in { animation: none; }
  .helix-app .helix-tour-foco, .helix-app .helix-tour-tarjeta { transition: none; }
}

/* Hojas: la cabecera sticky no se sale por las esquinas y va del mismo tono que el cuerpo */
.helix-app .helix-sheet { overflow: hidden; background: rgba(26, 29, 34, 0.95); }
.helix-app .helix-sheet[style*="overflow-y"] { overflow-x: hidden; }
.helix-app .helix-sheet-header { background: rgba(26, 29, 34, 0.95); margin: -14px -16px 10px; padding: 14px 16px 10px; }
:root:not([data-theme="dark"]) .helix-app .helix-sheet { background: rgba(255, 255, 255, 0.96); }
:root:not([data-theme="dark"]) .helix-app .helix-sheet-header { background: rgba(255, 255, 255, 0.96); }
@media (max-width: 1023px) {
  .helix-app .helix-sheet { background: rgba(26, 29, 34, 0.96); }
  .helix-app .helix-sheet-header { background: rgba(26, 29, 34, 0.96); }
}

/* Agenda: detalle del modo de reserva (token de Calendly, pagina de reservas) bajo las tarjetas */
.helix-app #hx-ag-modo-detalle { margin: 10px 0 8px; }
.helix-app .hx-agenda-modo-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.helix-app .hx-agenda-modo-fila .hx-field { flex: 1 1 260px; }

/* =========================================================
   18. PALETA DE ACCIONES (Cmd+K) y atajos: capa densa como las hojas,
   filas planas, teclas como chips. helix-paleta.js.
   ========================================================= */
.helix-app .hx-paleta-fondo { position: fixed; inset: 0; z-index: 9200; background: var(--scrim, rgba(0, 0, 0, 0.45)); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; animation: hx-fade 120ms var(--ease-out) both; }
.helix-app .hx-paleta { width: min(600px, 100%); max-height: min(70vh, 560px); display: flex; flex-direction: column; border-radius: 14px; background: rgba(26, 29, 34, 0.96); box-shadow: inset 0 0 0 1px var(--hair-strong), 0 30px 80px rgba(0, 0, 0, 0.5); overflow: hidden; animation: hx-pop 180ms var(--ease-out) both; }
:root:not([data-theme="dark"]) .helix-app .hx-paleta { background: rgba(255, 255, 255, 0.97); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), 0 30px 80px rgba(20, 30, 45, 0.3); }
.helix-app .hx-paleta-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--hair); color: var(--text-3); }
.helix-app .hx-paleta-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-1); font: inherit; font-size: 15px; outline: 0; }
.helix-app .hx-paleta-input::placeholder { color: var(--text-3); }
.helix-app .hx-paleta-lista { overflow: auto; padding: 6px; }
.helix-app .hx-paleta-grupo { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.helix-app .hx-paleta-fila { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-1); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.helix-app .hx-paleta-fila.is-sel { background: var(--layer-2); }
.helix-app .hx-paleta-ico { display: inline-flex; width: 22px; justify-content: center; color: var(--text-2); }
.helix-app .hx-paleta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.helix-app .hx-paleta-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.helix-app .hx-paleta-sub { font-size: 12px; color: var(--text-3); }
.helix-app .hx-paleta-vacio { padding: 22px 12px; text-align: center; color: var(--text-3); font-size: 13px; }
.helix-app .hx-paleta-pie { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--text-3); }
.helix-app .hx-paleta-kbd { display: inline-flex; gap: 3px; margin-left: auto; }
.helix-app .hx-paleta-pie .hx-paleta-kbd { margin-left: 0; }
.helix-app .hx-paleta-kbd kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--hair); color: var(--text-2); font: 600 11px/1 var(--font-sans); }
@keyframes hx-fade { from { opacity: 0; } to { opacity: 1; } }
/* Boton de la barra superior: capsula discreta con el atajo. Solo escritorio. */
.helix-app .hx-paleta-btn { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--hair); color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.helix-app .hx-paleta-btn:hover { background: var(--layer-2); color: var(--text-2); }
.helix-app .hx-paleta-btn .hx-paleta-kbd { margin-left: 2px; }
@media (max-width: 1023px) { .helix-app .hx-paleta-btn { display: none; } .helix-app .hx-paleta-fondo { padding-top: 8vh; } }

/* =========================================================
   19. RESPUESTAS RAPIDAS: popover sobre el composer (denso como las hojas),
   filas planas, y la seccion de Ajustes. helix-respuestas.js.
   ========================================================= */
.helix-app .hx-rr-pop { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); z-index: 40; max-height: 320px; display: flex; flex-direction: column; border-radius: 12px; background: rgba(26, 29, 34, 0.985); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--hair-strong), 0 18px 44px rgba(0, 0, 0, 0.45); overflow: hidden; animation: hx-pop 160ms var(--ease-out) both; }
:root:not([data-theme="dark"]) .helix-app .hx-rr-pop { background: rgba(255, 255, 255, 0.97); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10), 0 18px 44px rgba(20, 30, 45, 0.25); }
.helix-app .hx-rr-cab { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--hair); color: var(--text-3); }
.helix-app .hx-rr-buscar { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-1); font: inherit; font-size: 13.5px; outline: 0; }
.helix-app .hx-rr-lista { overflow: auto; padding: 6px; }
.helix-app .hx-rr-item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-1); font: inherit; text-align: left; cursor: pointer; }
.helix-app .hx-rr-item.is-sel { background: var(--layer-2); }
.helix-app .hx-rr-titulo { font-size: 13px; font-weight: 600; }
.helix-app .hx-rr-titulo em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-3); margin-left: 6px; }
.helix-app .hx-rr-texto { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.helix-app .hx-rr-vacio { padding: 16px 12px; font-size: 13px; color: var(--text-3); text-align: center; }
.helix-app .hx-rr-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--text-3); }
.helix-app .hx-rr-enlace { border: 0; background: transparent; color: var(--accent-soft, var(--accent)); font: inherit; font-size: 12px; cursor: pointer; padding: 0; }
.helix-app .hx-rr-enlace:hover { text-decoration: underline; }
.helix-app .hx-rr-fila { display: grid; grid-template-columns: 200px 1fr auto; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.helix-app .hx-rr-fila .hx-rr-fila-texto { height: auto; min-height: 56px; padding: 8px 10px; resize: vertical; }
.helix-app .hx-rr-acciones { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
@media (max-width: 760px) {
  .helix-app .hx-rr-fila { grid-template-columns: 1fr auto; }
  .helix-app .hx-rr-fila .hx-rr-fila-texto { grid-column: 1 / -1; }
  .helix-app .hx-rr-pop { max-height: 46vh; }
}

/* =========================================================
   20. CONECTAR TUS LEADS (2026-09-04): la pantalla que enchufa las fuentes de
   leads (wizard y Ajustes). Plana, sin ids, todo por clases hx-le-*.
   ========================================================= */
.helix-app .hx-le { display: grid; gap: 14px; }
.helix-app .hx-le-intro { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.helix-app .hx-le-h { font-size: 13px; font-weight: 600; color: var(--text-1); margin: 0 0 6px; }
.helix-app .hx-le-vias { display: grid; gap: 6px; }
.helix-app .hx-le-via { display: grid; grid-template-columns: 160px 1fr; gap: 2px 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--card-line); font-size: 12.5px; }
.helix-app .hx-le-via-t { font-weight: 600; color: var(--text-1); }
.helix-app .hx-le-via-d { color: var(--text-2); }
.helix-app .hx-le-via-r { grid-column: 2; color: var(--text-3); }
.helix-app .hx-le-via-d .helix-tag { margin-right: 4px; vertical-align: middle; }
.helix-app .hx-le-alerta { padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--danger, #e5484d) 10%, var(--layer-1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger, #e5484d) 45%, transparent); color: var(--text-1); font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; }
.helix-app .hx-le-vacio { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.helix-app .hx-le-caja { display: grid; gap: 8px; }
.helix-app .hx-le-fila { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.helix-app .hx-le-fila .hx-field { flex: 1 1 200px; min-width: 0; font-family: var(--font-mono); font-size: 12.5px; }
.helix-app .hx-le-fila select.hx-field { flex: 0 1 auto; font-family: var(--font-sans); font-size: 13px; }
.helix-app .hx-le-fila .helix-icon-btn { width: 34px; height: 34px; flex: none; }
.helix-app .hx-le-token { padding: 10px 12px; border-radius: var(--r-md); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); word-break: break-all; font-size: 12.5px; }
.helix-app .hx-le-token code { flex: 1 1 200px; font-family: var(--font-mono); font-size: 12.5px; }
.helix-app .hx-le-pasos { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-2); line-height: 1.55; }
.helix-app .hx-le-pasos li { margin: 2px 0; }
.helix-app .hx-le-pasos code, .helix-app .hx-le-campos code, .helix-app .hx-le-res code { font-family: var(--font-mono); font-size: 12px; background: var(--layer-2); padding: 1px 5px; border-radius: 4px; }
.helix-app .hx-le-campos { font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.helix-app textarea.hx-le-script { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.45; white-space: pre; overflow: auto; resize: vertical; }
.helix-app .hx-le-sub { padding: 10px 12px; border-radius: var(--r-md); background: var(--layer-1); box-shadow: inset 0 0 0 1px var(--card-line); display: grid; gap: 8px; }
.helix-app .hx-le-sub.is-reco { box-shadow: inset 0 0 0 1px var(--accent); }
.helix-app .hx-le-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.helix-app .hx-le-res { font-size: 13px; line-height: 1.55; color: var(--text-1); }
.helix-app .hx-le-res:empty { display: none; }
.helix-app .hx-le-csv-btn { cursor: pointer; }
.helix-app .hx-le-csv-tabla { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12.5px; }
.helix-app .hx-le-csv-tabla th, .helix-app .hx-le-csv-tabla td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--card-line); }
.helix-app .hx-le-csv-tabla th { color: var(--text-3); font-weight: 600; }
.helix-app .hx-le-csv-inv, .helix-app .hx-le-csv-cols { color: var(--text-3); font-size: 12px; margin-top: 4px; }
.helix-app .hx-le-csv-ap { margin-top: 8px; }
.helix-app .hx-le-csv-ok { display: flex; gap: 8px; align-items: center; margin: 8px 0; cursor: pointer; }
.helix-app .hx-le-res.is-ok { color: var(--positive); }
.helix-app .hx-le-res.is-mal { color: var(--warning-text); }
.helix-app .hx-le-res.is-escucha { color: var(--text-2); }
.helix-app .hx-le-res ol { margin: 6px 0; padding-left: 18px; }
.helix-app .hx-le-res .helix-btn { margin-left: 6px; vertical-align: middle; }
.helix-app details.hx-le-det > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); list-style: none; display: flex; gap: 4px; align-items: center; }
.helix-app details.hx-le-det > summary::-webkit-details-marker { display: none; }
.helix-app details.hx-le-det > summary svg { transition: transform 160ms var(--ease-out); }
.helix-app details.hx-le-det[open] > summary { margin-bottom: 8px; }
.helix-app details.hx-le-det[open] > summary svg { transform: rotate(90deg); }
.helix-app .hx-le-regla { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r-md); background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--card-line); }
.helix-app .hx-le-regla-n { flex: 1 1 160px; min-width: 0; font-size: 13px; }
.helix-app .hx-le-regla-n small { display: block; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .helix-app .hx-le-via { grid-template-columns: 1fr; }
  .helix-app .hx-le-via-r { grid-column: 1; }
}

/* =========================================================
   12. BOTONES v4 (2026-09-08): planos y precisos.
   Alex: «hay que rediseñar todos los botones como este, me parecen
   horrendos» (la cápsula de cristal con filo renderizado). Los botones
   dejan el cristal y pasan al lenguaje del contenido: relleno sólido,
   filo de 1 px, radio 8, sin degradado ni sombra de texto. El cristal se
   queda en el chrome (raíl, barra inferior, hojas, diálogos, toasts, chips).
   Va al final de la hoja a propósito: pisa la receta de cristal (§5-6, §11).
   ========================================================= */
.helix-app .helix-btn--primary::after, .helix-app .helix-btn--primary::before,
.helix-app .helix-btn--secondary::after, .helix-app .helix-btn--secondary::before,
.helix-app .helix-btn--danger::after, .helix-app .helix-btn--danger::before,
.helix-app .helix-icon-btn::after, .helix-app .helix-icon-btn::before,
.helix-app .helix-lead-detail-send::after, .helix-app .helix-lead-detail-send::before,
.helix-app .helix-composer-btn::after, .helix-app .helix-composer-btn::before { content: none; }

.helix-app .helix-btn {
  border-radius: 8px; font-weight: 500; gap: 6px; letter-spacing: -0.006em;
  text-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid transparent; isolation: auto;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), transform 90ms var(--ease-out);
}
.helix-app .helix-btn:active { transform: translateY(0.5px) scale(0.985); }
.helix-app .helix-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.helix-app .helix-btn:disabled, .helix-app .helix-btn[aria-disabled="true"] { opacity: 0.5; cursor: default; transform: none; }
.helix-app .helix-btn--sm { min-height: 30px; padding: 4px 12px; font-size: 12.5px; border-radius: 7px; }
.helix-app .helix-btn--md { min-height: 34px; padding: 6px 14px; font-size: 13px; }
.helix-app .helix-btn--lg { min-height: 40px; padding: 8px 18px; font-size: 14px; border-radius: 9px; }

/* Primario: acento sólido, brillo de 1 px arriba, filo oscuro de 1 px. */
.helix-app .helix-btn--primary {
  background: var(--accent); color: #fff; font-weight: 600;
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 1px rgba(0, 0, 0, 0.22);
}
.helix-app .helix-btn--primary:hover { background: var(--accent-hover); }
.helix-app .helix-btn--primary:active { background: #0070E0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); }
/* Secundario: capa sutil + filo. */
.helix-app .helix-btn--secondary {
  background: var(--layer-2); color: var(--text-1); border-color: var(--hair-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.helix-app .helix-btn--secondary:hover { background: var(--layer-3); }
.helix-app .helix-btn--secondary:active { background: var(--layer-2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); }
/* Fantasma: solo texto; superficie al pasar. */
.helix-app .helix-btn--ghost { background: transparent; color: var(--text-2); border-color: transparent; box-shadow: none; }
.helix-app .helix-btn--ghost:hover { background: var(--layer-2); color: var(--text-1); }
/* Peligro: tinte rojo con filo, texto rojo. */
.helix-app .helix-btn--danger {
  background: rgba(255, 69, 58, 0.12); color: var(--danger-text, #FF7A72); border-color: rgba(255, 69, 58, 0.30); box-shadow: none;
}
.helix-app .helix-btn--danger:hover { background: rgba(255, 69, 58, 0.20); }
/* Botones de icono y de envío: mismos materiales, redondos. */
.helix-app .helix-icon-btn {
  background: var(--layer-2); color: var(--text-2); border: 1px solid var(--hair-strong);
  box-shadow: none; text-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; isolation: auto;
}
.helix-app .helix-icon-btn:hover { background: var(--layer-3); color: var(--text-1); }
.helix-app .helix-composer-btn {
  background: var(--layer-2); color: var(--text-2); border: 1px solid var(--hair-strong); box-shadow: none; isolation: auto;
}
.helix-app .helix-composer-btn:hover { background: var(--layer-3); color: var(--text-1); }
.helix-app .helix-lead-detail-send {
  background: var(--accent); color: #fff; border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 1px rgba(0, 0, 0, 0.22); isolation: auto;
}
.helix-app .helix-lead-detail-send:hover { background: var(--accent-hover); }

/* Tema claro: blanco con filo gris; el primario sin brillo (ya es luminoso). */
:root:not([data-theme="dark"]) .helix-app .helix-btn--primary,
:root:not([data-theme="dark"]) .helix-app .helix-lead-detail-send {
  border-color: rgba(0, 60, 140, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 122, 255, 0.22);
}
:root:not([data-theme="dark"]) .helix-app .helix-btn--primary:active { background: #0062CC; }
:root:not([data-theme="dark"]) .helix-app .helix-btn--secondary,
:root:not([data-theme="dark"]) .helix-app .helix-icon-btn,
:root:not([data-theme="dark"]) .helix-app .helix-composer-btn {
  background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
:root:not([data-theme="dark"]) .helix-app .helix-btn--secondary:hover,
:root:not([data-theme="dark"]) .helix-app .helix-icon-btn:hover,
:root:not([data-theme="dark"]) .helix-app .helix-composer-btn:hover { background: #fff; border-color: rgba(0, 0, 0, 0.20); }
:root:not([data-theme="dark"]) .helix-app .helix-btn--danger { background: rgba(255, 59, 48, 0.10); color: #C0281E; border-color: rgba(255, 59, 48, 0.30); }
:root:not([data-theme="dark"]) .helix-app .helix-btn--danger:hover { background: rgba(255, 59, 48, 0.16); }
@media (prefers-reduced-motion: reduce) { .helix-app .helix-btn, .helix-app .helix-btn:active { transition: none; transform: none; } }