/* =========================================================
   Helix · Components
   Avatar, HeatDot, HeatPill, Tag, Button, IconButton, Input.
   ========================================================= */

/* ---------- Pull-to-refresh indicator ---------- */
.helix-ptr {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 5000;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-1, #e5e5e7);
  color: var(--text-1, #0a0a0a);
  padding: 8px 14px;
  border-radius: 9999px;
  font-family: var(--font-sans, system-ui);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 180ms ease-out;
}
.helix-ptr.is-visible { opacity: 1; }
.helix-ptr-arrow {
  display: inline-block;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.helix-ptr.is-ready .helix-ptr-arrow { transform: rotate(180deg); }
.helix-ptr.is-loading .helix-ptr-arrow {
  animation: helix-ptr-spin 800ms linear infinite;
}
@keyframes helix-ptr-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Action button feedback (sheet actions) ---------- */
/* Cuando una acción del sheet se completa, mostramos un check verde
   animado en el mismo botón durante 1.4s sin cerrar el sheet, para que
   el user pueda seguir aplicando acciones consecutivas sin perder el
   contexto. */
.helix-app .helix-sheet-action.helix-action-pressed {
  background: var(--bg-sunken);
}
.helix-app .helix-sheet-action.helix-action-success {
  background: var(--positive-bg) !important;
  color: var(--positive) !important;
  font-weight: 600;
  animation: helix-action-success-pulse 280ms var(--ease-out);
}
.helix-app .helix-action-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  animation: helix-check-pop var(--dur-fast) var(--ease-out);
}
@keyframes helix-check-pop {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes helix-action-success-pulse {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}


/* Tag danger para "no contesta" en lead row */
.helix-app .helix-tag--danger {
  background: var(--danger-bg);
  color: #a31b14;
}
.helix-app[data-theme="dark"] .helix-tag--danger { color: #ff8a8a; }
.helix-app .helix-tag--positive { background: var(--positive-bg); color: var(--positive); }

/* ---------- Tab content fade-in cross-render ---------- */
.helix-anim-tab-in {
  animation: helix-tab-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes helix-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Lead detail entry from right (slide + fade) ---------- */
.helix-anim-lead-in {
  animation: helix-lead-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes helix-lead-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .helix-anim-tab-in,
  .helix-anim-lead-in { animation: none; }
}

/* ---------- Skeleton loaders ---------- */
.helix-app .helix-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-sunken) 0%,
    var(--border-2) 50%,
    var(--bg-sunken) 100%
  );
  background-size: 200% 100%;
  animation: helix-skeleton-in var(--dur-fast) var(--ease-out) both;
  border-radius: var(--r-md);
}
.helix-app .helix-skeleton--avatar { width: 36px; height: 36px; border-radius: 50%; }
.helix-app .helix-skeleton--line { height: 14px; border-radius: 7px; }
.helix-app .helix-skeleton-bubble {
  height: 44px;
  width: 60%;
  margin: 10px 16px;
  border-radius: 18px;
  background: linear-gradient(
    90deg,
    var(--bg-sunken) 0%,
    var(--border-2) 50%,
    var(--bg-sunken) 100%
  );
  background-size: 200% 100%;
  animation: helix-skeleton-in var(--dur-fast) var(--ease-out) both;
}
.helix-app .helix-skeleton-bubble--right { margin-left: auto; width: 50%; }
.helix-app .helix-skeleton-bubble--left { width: 65%; }
@keyframes helix-skeleton-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.helix-app .helix-skeleton-list { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.helix-app .helix-skeleton-list .helix-skeleton--line { margin: 6px 0; }
@media (prefers-reduced-motion: reduce) {
  .helix-app .helix-skeleton,
  .helix-app .helix-skeleton-bubble { animation: none; opacity: 0.6; }
}

/* ---------- Avatar (monogram circle) ---------- */
.helix-app .helix-avatar {
  border-radius: 50%;
  color: var(--avatar-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
  font-feature-settings: "cv11";
  font-family: var(--font-sans);
}
.helix-app .helix-avatar--1 { background: var(--avatar-bg-1); }
.helix-app .helix-avatar--2 { background: var(--avatar-bg-2); }
.helix-app .helix-avatar--3 { background: var(--avatar-bg-3); }
.helix-app .helix-avatar--4 { background: var(--avatar-bg-4); }

/* ---------- Selector de tenant (F0.3c · multi-tenant) ---------- */
/* Oculto por defecto; el JS lo muestra solo si hay más de un cliente. */
.helix-app .helix-tenant-select {
  appearance: none;
  -webkit-appearance: none;
  height: 34px;
  max-width: 150px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: var(--bg-elevated)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 8px center;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  text-overflow: ellipsis;
}
.helix-app .helix-tenant-select:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}
.helix-app .helix-tenant-select[hidden] { display: none; }

/* ---------- Métrica-norte (F1) — tarjeta "Coste real" en Insights ---------- */
.helix-app .helix-metrica { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.helix-app .helix-metrica-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.helix-app .helix-metrica-row .t-tnum {
  font-weight: 600; color: var(--text-1); font-size: 18px;
}
.helix-app .helix-metrica-empty { line-height: 1.55; margin-top: 6px; }
.helix-app .helix-metrica-empty code {
  font-size: 12px; padding: 1px 5px; border-radius: 5px;
  background: var(--bg-sunken); border: 1px solid var(--border-1);
}

/* ---------- F4 · Campañas (read-only) ---------- */
.helix-app .helix-campanas-list { display: flex; flex-direction: column; gap: 12px; }
.helix-app .helix-campana-row {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: 14px;
  background: var(--bg-elevated); border: 1px solid var(--border-1); box-shadow: var(--shadow-1);
}
.helix-app .helix-campana-name { font-weight: 600; color: var(--text-1); }
.helix-app .helix-campana-cells {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px;
}
.helix-app .helix-campana-cell { display: flex; flex-direction: column; gap: 2px; }
.helix-app .helix-campana-cell .t-tnum { font-weight: 600; color: var(--text-1); font-size: 17px; }
.helix-app .helix-campana-cell--signal .t-tnum { color: var(--text-1); font-weight: 700; }

/* ---------- F5 · Copiloto (acciones supervisadas) ---------- */
.helix-app .helix-copiloto-intro { margin: -8px 0 16px; line-height: 1.5; }
.helix-app .helix-copiloto-list { display: flex; flex-direction: column; gap: 12px; }
.helix-app .helix-copiloto-card {
  padding: 16px; border-radius: 14px;
  background: var(--bg-elevated); border: 1px solid var(--border-1); box-shadow: var(--shadow-1);
}
.helix-app .helix-copiloto-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.helix-app .helix-copiloto-tipo {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 6px; background: var(--bg-sunken); border: 1px solid var(--border-1);
}
.helix-app .helix-copiloto-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.helix-app .helix-btn-aprobar {
  padding: 8px 16px; border-radius: 10px; border: none; cursor: pointer;
  font-weight: 600; font-size: 14px; color: #fff; background: var(--accent, #007AFF);
}
.helix-app .helix-btn-aprobar:disabled { opacity: .6; cursor: default; }
.helix-app .helix-copiloto-result.ok { color: var(--positive); font-weight: 600; }
.helix-app .helix-copiloto-result.err { color: var(--danger); font-weight: 600; }

/* ---------- Heat dot (small filled circle) ---------- */
.helix-app .helix-heat-dot {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- Heat pill (status badge) ---------- */
.helix-app .helix-heat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
}
.helix-app .helix-heat-pill--cliente {
  padding: 0 12px;
  color: #fff;
  background: var(--grad-signal);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
.helix-app .helix-heat-pill--frio     { background: var(--heat-frio-bg);     color: var(--heat-frio-text); }
.helix-app .helix-heat-pill--tibio    { background: var(--heat-tibio-bg);    color: var(--heat-tibio-text); }
.helix-app .helix-heat-pill--caliente { background: var(--heat-caliente-bg); color: var(--heat-caliente-text); }
.helix-app .helix-heat-pill--listo    { background: var(--heat-listo-bg);    color: var(--heat-listo-text); }
.helix-app .helix-heat-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.helix-app .helix-heat-pill--frio     .helix-heat-pill-dot { background: var(--heat-frio); }
.helix-app .helix-heat-pill--tibio    .helix-heat-pill-dot { background: var(--heat-tibio); }
.helix-app .helix-heat-pill--caliente .helix-heat-pill-dot { background: var(--heat-caliente); }
.helix-app .helix-heat-pill--listo    .helix-heat-pill-dot { background: var(--heat-listo); }

/* ---------- Tag (small inline label with optional icon) ---------- */
.helix-app .helix-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.helix-app .helix-tag--neutral { background: var(--bg-sunken); color: var(--text-2); }
.helix-app .helix-tag--accent  { background: var(--accent-bg); color: var(--accent); }
.helix-app .helix-tag--warning { background: var(--warning-bg); color: var(--warning-text); }
.helix-app .helix-tag--signal {
  padding: 0 9px;
  color: #fff;
  background: var(--grad-signal);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ---------- Buttons ---------- */
.helix-app .helix-btn {
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  letter-spacing: -0.003em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-fast) var(--ease-out);
  border: 1px solid transparent;
}
.helix-app .helix-btn--sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.helix-app .helix-btn--md { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.helix-app .helix-btn--lg { min-height: 44px; padding: 10px 18px; font-size: 15px; }

/* Touch-target compliance (WCAG 2.5.5 Level AAA) — botones siempre 44x44 mínimo
   en touchscreens, sin cambiar el visual height de los botones pequeños. */
@media (pointer: coarse) {
  .helix-app .helix-btn--sm,
  .helix-app .helix-btn--md { min-height: 44px; }
}

.helix-app .helix-btn--primary {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.helix-app .helix-btn--primary:hover { background: var(--accent-hover); }

.helix-app .helix-btn--secondary {
  background: var(--bg-elevated);
  color: var(--text-1);
  border-color: var(--border-1);
  font-weight: 500;
}
.helix-app .helix-btn--secondary:hover { background: var(--bg-sunken); }

.helix-app .helix-btn--ghost {
  background: transparent;
  color: var(--text-1);
  font-weight: 500;
}
.helix-app .helix-btn--ghost:hover { background: var(--bg-sunken); }

.helix-app .helix-btn--danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--border-1);
  font-weight: 500;
}

/* ---------- Icon button ---------- */
.helix-app .helix-icon-btn {
  background: transparent;
  color: var(--text-2);
  border: none;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-sans);
  padding: 8px;
  min-width: 40px;
  min-height: 40px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.helix-app .helix-icon-btn:hover { background: var(--bg-sunken); color: var(--text-1); }
.helix-app .helix-icon-btn:active { background: var(--bg-sunken); }

/* Touch-target ≥44px en dispositivos táctiles */
@media (pointer: coarse) {
  .helix-app .helix-icon-btn { min-width: 44px; min-height: 44px; }
}


/* ---------- Lead row ---------- */
.helix-app .helix-lead-row {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  font-family: var(--font-sans);
  color: var(--text-1);
}
.helix-app .helix-lead-row:hover { background: var(--bg-sunken); }
.helix-app .helix-lead-row.is-active { background: var(--accent-bg); }

.helix-app .helix-row-stripe {
  /* Franja 3px de temperatura en el borde izquierdo — la señal de calor del
     sistema (README Helix). Convive con la barra de selección (2px, interior). */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
.helix-app .helix-row-active-bar {
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.helix-app .helix-row-main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.helix-app .helix-row-name {
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
  font-family: var(--font-sans);
  min-width: 0;
  flex: 0 1 auto;
}
.helix-app .helix-row-snippet {
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
/* Estado de llamada de follow-up — icono-solo (sin fondo/pill). Pesa como el
   heat-dot; no se comprime (flex-shrink:0) para que el snippet ceda primero. */
.helix-app .helix-row-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}
.helix-app .helix-row-call svg { display: block; }
.helix-app .helix-row-call--done    { color: var(--accent); }            /* hecha → azul */
.helix-app .helix-row-call--missed  { color: var(--danger); }            /* no_contesta → rojo */
.helix-app .helix-row-call--pending { color: var(--text-3, #8E8E93); }   /* pendiente → gris */
.helix-app .helix-row-tail {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.helix-app .helix-row-time {
  color: var(--text-3);
  font-size: 12px;
}


/* ---------- Chat bubble — estilo iMessage con avatar inline ---------- */
.helix-app .helix-chat-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}
.helix-app .helix-chat-bubble-row[data-side="left"]  { justify-content: flex-start; }
.helix-app .helix-chat-bubble-row[data-side="right"] { justify-content: flex-end; }

.helix-app .helix-chat-avatar-slot {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.helix-app .helix-chat-avatar-mini {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
}
.helix-app .helix-chat-avatar-mini--ia {
  background: var(--bg-elevated);
  border: 1px solid var(--border-1);
  color: var(--text-2);
}
.helix-app .helix-chat-avatar-mini--alex {
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.helix-app .helix-chat-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.003em;
  color: var(--text-1);
  word-break: break-word;
  text-align: left;
  font-family: var(--font-sans);
  max-width: 75%;
  box-shadow: var(--shadow-1);
}
.helix-app .helix-chat-bubble--lead {
  background: var(--bg-sunken);
  box-shadow: none;
}
.helix-app .helix-chat-bubble--ia {
  background: var(--bg-elevated);
  border: 1px solid var(--border-1);
}
.helix-app .helix-chat-bubble--alex {
  background: var(--bg-elevated);
  border: 1px solid var(--border-1);
  border-left: 2px solid var(--accent);
  padding-left: 18px;
  box-shadow: 0 0 0 1px var(--accent-bg), 0 1px 2px rgba(0,0,0,0.04);
}

/* Trailing time — junto a la burbuja, alineado al baseline inferior. */
.helix-app .helix-chat-trailing-time {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
  min-width: 38px;
  padding-bottom: 4px;
  white-space: nowrap;
}
.helix-app .helix-chat-bubble-row[data-side="left"]  .helix-chat-trailing-time { text-align: left; }
.helix-app .helix-chat-bubble-row[data-side="right"] .helix-chat-trailing-time { text-align: right; }

/* Delivery status label dentro del trailing-time del bot:
   "Enviado · 14:32" / "Entregado · 14:33" / "Leído · 14:35" / "No entregado · 14:36"
   Color sutil que escala con el estado. */
.helix-app .helix-status-label {
  font-weight: 500;
}
.helix-app .helix-status-sent      { color: var(--text-3); }
.helix-app .helix-status-delivered { color: var(--text-2); }
.helix-app .helix-status-read      { color: var(--accent); font-weight: 600; }
.helix-app .helix-status-failed    { color: var(--danger); font-weight: 600; }
/* Mensaje escrito a mano por el closer (fuente='alex') — acento, para
   distinguirlo de un delivery status del bot. */
.helix-app .helix-status-manual    { color: var(--accent); font-weight: 600; }
@media (max-width: 480px) {
  /* En móviles pequeños el statusLabel + time juntos se pueden cortar.
     Ampliamos min-width y permitimos que wrappee a 2 líneas si toca. */
  .helix-app .helix-chat-bubble-row[data-side="right"] .helix-chat-trailing-time {
    min-width: 72px;
    white-space: normal;
    line-height: 1.3;
  }
}

/* Mensaje nuevo: animación entrada (fade + slide-up). */
.helix-app .helix-chat-bubble-row[data-new="true"] {
  animation: helix-bubble-pop-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes helix-bubble-pop-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Chat day divider ("Hoy" / "Ayer" / "21 may") ---------- */
.helix-app .helix-chat-day-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 6px;
}
.helix-app .helix-chat-day-divider-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 4px 12px;
  background: var(--bg-sunken);
  border-radius: 9999px;
}

/* ---------- Canal pills (filtro de canal del inbox) ---------- */
.helix-app .helix-canal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 48px;
  padding: 6px 16px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-1);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.helix-app .helix-canal-pill:hover { background: var(--bg-sunken); color: var(--text-1); }
.helix-app .helix-canal-pill.is-on {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}
@media (pointer: coarse) {
  .helix-app .helix-canal-pill { min-height: 44px; }
  .helix-app .helix-vista-chip { min-height: 44px; }
}

/* Fila de pills: scrollea horizontal en móvil (sin barra visible) */
.helix-app .helix-canal-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.helix-app .helix-canal-pills::-webkit-scrollbar { display: none; }
.helix-app .helix-canal-pills-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border-1);
  flex: none;
  margin: 4px 2px;
}

/* Chips de vista rápida (Todos / Por llamar / Agendados / Sin interés) */
.helix-app .helix-vista-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-1);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.helix-app .helix-vista-chip:hover { background: var(--bg-sunken); color: var(--text-1); }
.helix-app .helix-vista-chip.is-on {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.helix-app .helix-vista-chip-n {
  font-size: 12px;
  color: var(--text-3);
}
.helix-app .helix-vista-chip.is-on .helix-vista-chip-n { color: var(--accent); }

/* ---------- Accesos de lista (Pendientes / Potenciales, patrón Archivados) ---------- */
.helix-app .helix-list-access {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-height: 44px;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--border-2);
  background: var(--bg-elevated);
  font: inherit;
  font-family: var(--font-sans);
  text-align: left;
  color: var(--text-1);
  transition: background var(--dur-fast) var(--ease-out);
}
.helix-app .helix-list-access:hover { background: var(--bg-sunken); }
.helix-app .helix-list-access--footer { border-bottom: 0; border-top: 1px solid var(--border-2); }
.helix-app .helix-list-access-icon { display: inline-flex; color: var(--text-3); flex: none; }
.helix-app .helix-list-access-label { font-weight: 600; }
.helix-app .helix-list-access-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-3);
}
.helix-app .helix-list-access-count--danger { color: var(--danger); font-weight: 700; }
.helix-app .helix-list-access--pendientes .helix-list-access-icon { color: var(--danger); }

/* ---------- Volver + header de sub-listas (Pendientes / Potenciales) ---------- */
.helix-app .helix-list-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  min-height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-sans);
  color: var(--text-2);
}
.helix-app .helix-list-back:hover { color: var(--text-1); }
.helix-app .helix-list-header { padding: 0 16px 8px; }
.helix-app .helix-list-header .t-caption { margin-top: 2px; }

/* ---------- Sub-navegación (segmented) de Insights ---------- */
.helix-app .helix-subnav {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-sunken);
  border-radius: var(--r-md);
}
.helix-app .helix-subnav-btn {
  border: none;
  background: transparent;
  padding: 6px 14px;
  min-height: 32px;
  border-radius: calc(var(--r-md) - 2px);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  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); }
.helix-app .helix-subnav-btn.is-active {
  background: var(--bg-elevated);
  color: var(--text-1);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
@media (pointer: coarse) {
  .helix-app .helix-subnav-btn { min-height: 40px; }
}

/* ---------- Número hero dentro de cards (Cierre en llamada, Ingresos) ---------- */
.helix-app .helix-card-hero-num {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.1;
  margin: 6px 0 2px;
  color: var(--text-1);
}

/* ---------- Input inline (confirmaciones del copiloto, etc.) ---------- */
.helix-app .helix-input {
  font: inherit;
  font-family: var(--font-sans);
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  background: transparent;
  color: var(--text-1);
}
.helix-app .helix-input--inline { width: 180px; }

/* ---------- Ajustes / secciones (ancho de lectura común) ---------- */
.helix-app .helix-settings-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
}