/* Helix · panel v5 · base: todo cuelga de html.hx-v5 (plan: docs/plans/panel-v5-fd90).
   Tokens del prototipo aprobado (paleta final «mezcla»: grafito + brasa, acento coral; modo claro con
   barra clara «lb-b»). Además de los --v5-*, se reasignan los tokens del panel de siempre (--accent,
   --text-*, --slab-*, --card-*...) para que TODAS las pantallas hereden la paleta sin tocarlas. */

/* Logo H6: la h en perla sobre oscuro y en brasa sobre claro; el orbe siempre coral (helixMarkSvg). */
html.hx-v5 { --hx-logo-glifo: #141115; }   /* en oscuro, #EFE8E4 (bloque de abajo) */
html.hx-v5 .hx5a-logo svg { color: var(--hx-logo-glifo); }

html.hx-v5[data-theme="dark"] {
  --hx-logo-glifo: #EFE8E4;
  --v5-t1: #ECECF1; --v5-t2: #A3A3AD; --v5-t3: #6E6E78;
  --v5-acc: #FF5E57; --v5-acc-2: #FF7A6E;
  --v5-sheet: rgba(28, 28, 33, 0.92);
  --v5-card: #1B1B23; --v5-card2: rgba(255, 255, 255, 0.07); --v5-row: #1C1C25; --v5-col: rgba(255, 255, 255, 0.035);
  --v5-kcard: #22222C; --v5-line: rgba(255, 255, 255, 0.08); --v5-bin: rgba(255, 255, 255, 0.08);
  --v5-glass: rgba(60, 60, 68, 0.55); --v5-edge: rgba(255, 255, 255, 0.12); --v5-hl: rgba(255, 255, 255, 0.12);
  --v5-av: #26262F; --v5-track: rgba(255, 255, 255, 0.12);
  --v5-sh1: inset 0 .5px 0 rgba(255, 255, 255, .07), 0 14px 30px -14px rgba(0, 0, 0, .9), 0 30px 60px -34px color-mix(in srgb, var(--v5-acc) 50%, transparent);
  --v5-shg: 0 28px 64px -18px color-mix(in srgb, var(--v5-acc) 62%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--v5-acc) 42%, transparent);
  --v5-sheetsh: 0 30px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
  --v5-wall: radial-gradient(55% 62% at 0% 0%, rgba(196, 70, 46, .62), transparent 64%),
             radial-gradient(52% 58% at 100% 100%, rgba(226, 104, 58, .5), transparent 64%),
             radial-gradient(34% 40% at 100% 0%, rgba(255, 140, 90, .12), transparent 70%),
             linear-gradient(150deg, #26140F, #141115 48%, #1F1310);
  /* tokens del panel de siempre */
  --text-1: var(--v5-t1); --text-2: var(--v5-t2); --text-3: var(--v5-t3);
  --accent: var(--v5-acc); --accent-hover: #FF7068; --accent-soft: #FF8F87;
  --accent-bg: rgba(255, 94, 87, 0.14); --accent-ring: rgba(255, 94, 87, 0.35);
  --bg-page: #141115; --bg-elevated: #1B1B23; --bg-sunken: rgba(0, 0, 0, 0.22);
  --border-1: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.13);
  --hair: rgba(255, 255, 255, 0.08); --hair-strong: rgba(255, 255, 255, 0.13);
  --slab-bg: var(--v5-sheet); --slab-line: rgba(255, 255, 255, 0.07); --slab-sombra: var(--v5-sheetsh);
  --card-bg: var(--v5-card); --card-line: rgba(255, 255, 255, 0.06); --sunken-bg: rgba(0, 0, 0, 0.22);
  --bubble-lead-bg: var(--v5-bin); --bubble-ia-bg: var(--v5-acc); --bubble-ia-border: transparent;
  --bubble-alex-bg: color-mix(in srgb, var(--v5-acc) 70%, #000); --bubble-alex-border: transparent;
  --r-slab: 28px; --r-card: 18px;
}

html.hx-v5:not([data-theme="dark"]) {
  --v5-t1: #0A0A0A; --v5-t2: #525252; --v5-t3: #8A8A92;
  --v5-acc: #F2493F; --v5-acc-2: #FF6A5F;
  --v5-sheet: rgba(250, 250, 252, 0.93);
  --v5-card: #FFFFFF; --v5-card2: #FFFFFF; --v5-row: #FFFFFF; --v5-col: rgba(10, 10, 40, 0.04);
  --v5-kcard: #FFFFFF; --v5-line: rgba(0, 0, 0, 0.07); --v5-bin: #E9E9EE;
  --v5-glass: rgba(255, 255, 255, 0.72); --v5-edge: rgba(0, 0, 0, 0.08); --v5-hl: rgba(255, 255, 255, 0.85);
  --v5-av: #F1EFEE; --v5-track: rgba(0, 0, 0, 0.08);
  --v5-sh1: 0 1px 2px rgba(30, 30, 90, .06), 0 10px 24px -10px rgba(30, 30, 90, .18), 0 30px 60px -30px color-mix(in srgb, var(--v5-acc) 42%, transparent);
  --v5-shg: 0 28px 64px -18px color-mix(in srgb, var(--v5-acc) 62%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--v5-acc) 42%, transparent);
  --v5-sheetsh: 0 30px 70px -26px rgba(120, 40, 20, .35), 0 0 0 .5px rgba(0, 0, 0, .06), inset 0 1px 0 #fff;
  --v5-wall: radial-gradient(55% 60% at 0% 0%, rgba(255, 150, 120, .55), transparent 62%),
             radial-gradient(50% 58% at 100% 100%, rgba(255, 130, 90, .42), transparent 62%),
             linear-gradient(150deg, #F2EBE8, #EAE4E1 50%, #EFE7E3);
  --text-1: var(--v5-t1); --text-2: var(--v5-t2); --text-3: var(--v5-t3);
  --accent: var(--v5-acc); --accent-hover: #E03D33; --accent-soft: #D9362C;
  --accent-bg: rgba(242, 73, 63, 0.10); --accent-ring: rgba(242, 73, 63, 0.30);
  --bg-page: #EFE8E4; --bg-elevated: #FFFFFF; --bg-sunken: rgba(30, 20, 20, 0.045);
  --border-1: rgba(0, 0, 0, 0.07); --border-2: rgba(0, 0, 0, 0.13);
  --hair: rgba(0, 0, 0, 0.07); --hair-strong: rgba(0, 0, 0, 0.13);
  --slab-bg: var(--v5-sheet); --slab-line: rgba(0, 0, 0, 0.06); --slab-sombra: var(--v5-sheetsh);
  --card-bg: var(--v5-card); --card-line: rgba(0, 0, 0, 0.06); --sunken-bg: rgba(30, 20, 20, 0.045);
  --bubble-lead-bg: var(--v5-bin); --bubble-ia-bg: var(--v5-acc); --bubble-ia-border: transparent;
  --bubble-alex-bg: #C7372E; --bubble-alex-border: transparent;
  --r-slab: 28px; --r-card: 18px;
}

html.hx-v5 {
  --v5-sig: linear-gradient(135deg, #007AFF 0%, #B84BFF 34%, #FF6B35 70%, #FF3B30 100%);
  --v5-hot: #FF6B35; --v5-ok: #34C759;
  --v5-eo: cubic-bezier(.16, 1, .3, 1);
  --v5-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
}

/* Fondo: la pared de brasa detrás de la barra y la hoja (sin manchas ni hebras del panel de siempre). */
html.hx-v5 body { background: var(--bg-page); }
html.hx-v5[data-theme="dark"] #helix-bg,
html.hx-v5:not([data-theme="dark"]) #helix-bg { background-image: var(--v5-wall); box-shadow: none; opacity: 1;
  transition: background .45s var(--v5-eo); }
html.hx-v5 #helix-bg .bg-blob,
html.hx-v5 #helix-bg .bg-strands { display: none; }

/* Tipografía como el prototipo */
html.hx-v5 .helix-app { font-family: var(--v5-font); font-size: 13.5px; letter-spacing: -.005em; color: var(--v5-t1); }
html.hx-v5 ::selection { background: color-mix(in srgb, var(--v5-acc) 30%, transparent); }

/* Primitivas que usan los decoradores v5 (clases hx5-*) */
html.hx-v5 .hx5-grad { background: var(--v5-sig); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.hx-v5 .hx5-deg { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--v5-t2); }
html.hx-v5 .hx5-av { box-sizing: border-box; width: 42px; height: 42px; border-radius: 50%; padding: 2.5px; flex-shrink: 0; background: var(--ring, #5A5A64); display: inline-flex; }
html.hx-v5 .hx5-av > span { width: 100%; height: 100%; border-radius: 50%; background: var(--v5-av); color: var(--v5-t1);
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12.5px; }
html.hx-v5 .hx5-lg { position: relative; isolation: isolate; border-radius: var(--r, 22px); background: var(--lgb, var(--v5-glass));
  -webkit-backdrop-filter: blur(var(--vb, 30px)) saturate(180%); backdrop-filter: blur(var(--vb, 30px)) saturate(180%);
  box-shadow: inset 0 .5px 0 var(--v5-hl), 0 0 0 .5px var(--v5-edge), var(--drop, 0 10px 30px -12px rgba(0, 0, 0, .3)); }
html.hx-v5 .hx5-btn-a { height: 36px; padding: 0 16px; border-radius: 999px; border: none; background: var(--v5-acc); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  transition: transform .12s var(--v5-eo), filter .2s var(--v5-eo), box-shadow .2s var(--v5-eo); }
html.hx-v5 .hx5-btn-a:hover { filter: brightness(1.08); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--v5-acc) 70%, transparent); }
html.hx-v5 .hx5-btn-a kbd { font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px; opacity: .75; }
html.hx-v5 .hx5-btn-g { height: 36px; padding: 0 14px; border-radius: 999px; border: none; background: var(--v5-card2); color: var(--v5-t1);
  font: inherit; font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  transition: transform .12s var(--v5-eo), background .2s var(--v5-eo); }
html.hx-v5:not([data-theme="dark"]) .hx5-btn-g { background: #ECECEF; }
html.hx-v5 .hx5-btn-a:active, html.hx-v5 .hx5-btn-g:active { transform: scale(.97); }

@keyframes hx5-entra { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes hx5-entraL { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes hx5-burbuja { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hx5-asoma { 0% { opacity: 0; transform: translateY(40px) scale(.7); } 60% { opacity: 1; transform: translateY(-6px) scale(1.04); } 100% { transform: none; } }
@keyframes hx5-gira { to { transform: rotate(360deg); } }
@keyframes hx5-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes hx5-pulso { from { transform: scale(1); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }
@keyframes hx5-punto { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.hx-v5 .helix-app *, html.hx-v5 .hx5-lg { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── T10 · El resto de pantallas heredan la paleta: los azules que helix-material.css / components /
   screens fijan a mano (interruptores, botones primarios, etiquetas, focos, opciones, mapa de
   actividad, resaltado del tour) pasan al coral del rediseño. ── */
html.hx-v5 .helix-app .hx-switch input:checked ~ .hx-switch-track,
html.hx-v5:not([data-theme="dark"]) .helix-app .hx-switch input:checked ~ .hx-switch-track { background: var(--v5-acc); border-color: var(--v5-acc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
html.hx-v5 .helix-app .helix-tag--signal, html.hx-v5 .helix-app .helix-tag--accent,
html.hx-v5 .helix-app .helix-lead-row .helix-tag--accent { background: color-mix(in srgb, var(--v5-acc) 20%, transparent); color: var(--accent-soft); }
html.hx-v5:not([data-theme="dark"]) .helix-app .helix-tag--signal { background: color-mix(in srgb, var(--v5-acc) 12%, transparent); }
html.hx-v5 .helix-app .hx-choice:has(input:checked),
html.hx-v5:not([data-theme="dark"]) .helix-app .hx-choice:has(input:checked) { background: color-mix(in srgb, var(--v5-acc) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-acc) 45%, transparent); }
html.hx-v5 .helix-app .helix-setting-option.is-active,
html.hx-v5:not([data-theme="dark"]) .helix-app .helix-setting-option.is-active { background: color-mix(in srgb, var(--v5-acc) 14%, transparent);
  color: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-acc) 45%, transparent); }
html.hx-v5:not([data-theme="dark"]) .helix-app .hx-card.is-unread { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-acc) 45%, transparent); }
html.hx-v5 .helix-app .helix-btn--primary::after,
html.hx-v5 .helix-app .helix-lead-detail-send::after { background-color: color-mix(in srgb, var(--v5-acc) 88%, transparent); }
html.hx-v5 .helix-app .helix-btn--primary:hover::after,
html.hx-v5 .helix-app .helix-lead-detail-send:hover::after { background-color: var(--v5-acc-2); }
html.hx-v5 .helix-app .helix-lead-detail-input:focus,
html.hx-v5:not([data-theme="dark"]) .helix-app .helix-lead-detail-input:focus,
html.hx-v5:not([data-theme="dark"]) .helix-app .helix-input:focus { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v5-acc) 55%, transparent), 0 0 0 3px var(--accent-ring); }
html.hx-v5 .helix-app *:focus-visible { outline-color: color-mix(in srgb, var(--v5-acc) 90%, transparent); }
html.hx-v5:not([data-theme="dark"]) .helix-app .helix-hoy-n { background: color-mix(in srgb, var(--v5-acc) 12%, transparent); }
html.hx-v5:not([data-theme="dark"]) .helix-app .helix-chat-nuevos::after { background: color-mix(in srgb, var(--v5-acc) 35%, transparent); }
html.hx-v5 .helix-app .hx-col.is-over { box-shadow: 0 0 0 2px var(--v5-acc) inset, 0 8px 28px color-mix(in srgb, var(--v5-acc) 18%, transparent); }
html.hx-v5 .helix-app .helix-mapa-celda[data-nivel="1"], html.hx-v5 .helix-app .helix-mapa-leyenda [data-nivel="1"] { background: color-mix(in srgb, var(--v5-acc) 22%, transparent); }
html.hx-v5 .helix-app .helix-mapa-celda[data-nivel="2"], html.hx-v5 .helix-app .helix-mapa-leyenda [data-nivel="2"] { background: color-mix(in srgb, var(--v5-acc) 45%, transparent); }
html.hx-v5 .helix-app .helix-mapa-celda[data-nivel="3"], html.hx-v5 .helix-app .helix-mapa-leyenda [data-nivel="3"] { background: color-mix(in srgb, var(--v5-acc) 72%, transparent); }
html.hx-v5 .helix-app { --chip-fu-bg: color-mix(in srgb, var(--v5-acc) 12%, transparent); --hl-btn-bg: color-mix(in srgb, var(--v5-acc) 88%, transparent); --hl-btn-bg-hover: var(--v5-acc-2); }
html.hx-v5 .helix-login input:focus { border-color: var(--v5-acc); background: color-mix(in srgb, var(--v5-acc) 8%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v5-acc) 22%, transparent); }
/* Anillo del tour (helix-material.css lo fija en azul). */
html.hx-v5 .helix-app .helix-tour-foco { box-shadow: 0 0 0 2px color-mix(in srgb, var(--v5-acc) 95%, transparent),
  0 0 0 6px color-mix(in srgb, var(--v5-acc) 22%, transparent), 0 0 0 9999px rgba(0, 0, 0, .40); }

/* ── Acceso (login, registro, paywall) y pago: viven fuera de .helix-app, así que la paleta de arriba no les
   llega. Piel v5 mínima sin tocar su lógica: el fondo ya es la pared v5 (#helix-bg), aquí el acento coral del
   botón y, en el pago, pared de brasa en vez de manchas azules y violetas. El pago sigue siempre oscuro: el
   iframe de Stripe va con #141419 (branding_settings), así que su tarjeta y el hueco del formulario no cambian. ── */
html.hx-v5[data-theme="dark"] .helix-login { --hl-btn-bg: color-mix(in srgb, var(--v5-acc) 88%, transparent); --hl-btn-bg-hover: var(--v5-acc-2); }
/* Claro: helix-material.css fija el fondo del botón (contraste AA); el coral oscuro de --accent-soft lo mantiene. */
html.hx-v5:not([data-theme="dark"]) .helix-login .hl-btn::after { background-color: #D9362C; box-shadow: inset 0 0 0 1px rgba(150, 30, 20, .30),
  inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 14px color-mix(in srgb, var(--v5-acc) 30%, transparent), 0 1px 2px rgba(0, 0, 0, .08); }
html.hx-v5:not([data-theme="dark"]) .helix-login .hl-btn:hover::after { background-color: #C4302A; }
html.hx-v5 .helix-pago-overlay {
  background: radial-gradient(55% 62% at 0% 0%, rgba(196, 70, 46, .62), transparent 64%),
              radial-gradient(52% 58% at 100% 100%, rgba(226, 104, 58, .5), transparent 64%),
              radial-gradient(34% 40% at 100% 0%, rgba(255, 140, 90, .12), transparent 70%),
              linear-gradient(150deg, #26140F, #141115 48%, #1F1310);
  --hp-signal: linear-gradient(135deg, #FF9A6B 0%, #FF6B5E 55%, #FF5E57 100%);
  --hp-signal-soft: rgba(255, 94, 87, .14); }
html.hx-v5 .helix-pago-overlay :is(.hp-blob-b, .hp-blob-p, .hp-sparks) { display: none; }
html.hx-v5 .helix-pago-overlay .hp-halo { background: radial-gradient(circle at 50% 42%, rgba(255, 94, 87, .18) 0%, rgba(226, 104, 58, .08) 45%, transparent 72%); }
html.hx-v5 .helix-pago-overlay .helix-pago-card::before { filter: drop-shadow(0 0 6px rgba(255, 94, 87, .5)); }
html.hx-v5 .helix-pago-overlay .helix-pago-mark { filter: drop-shadow(0 2px 10px rgba(255, 94, 87, .35)); }
html.hx-v5 .helix-pago-overlay .helix-pago-form::before { background: radial-gradient(60% 100% at 50% 0%, rgba(255, 94, 87, .14) 0%, transparent 70%); }
html.hx-v5 .helix-pago-overlay .hp-chip { color: #FFD3CC; }
html.hx-v5 .helix-pago-overlay :is(.helix-pago-check, .hp-lock) { color: #FF9C94; }

/* Título grande para las pantallas que no traen cabecera propia (lo pone helix-v5-shell.js). */
@media (min-width: 1024px) {
  html.hx-v5 .helix-app .hx5-titulo { padding: 4px 2px 16px; animation: hx5-entraL .5s var(--v5-eo) both; }
  html.hx-v5 .helix-app .hx5-titulo h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 34px; color: var(--v5-t1); }
  html.hx-v5 .helix-app .hx5-titulo p { margin: 3px 0 0; font-size: 13.5px; color: var(--v5-t2); }
}

/* Ticks de entrega del último saliente en la fila de la Bandeja (móvil y escritorio). */
html.hx-v5 .helix-lead-row .hx5-tick { display: inline-block; width: 15px; height: 11px; margin-right: 3px; vertical-align: -1px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--v5-t3); }
html.hx-v5 .helix-lead-row .hx5-tick.is-leido { color: #34B7F1; }
html.hx-v5 .helix-lead-row .hx5-tick.is-fallo { width: auto; height: auto; font-weight: 700; color: #FF453A; }

/* Canal del lead (WhatsApp o Instagram): marca rellena con el color de su app en la fila, la ficha y el Embudo (Alex, 24-09). */
html.hx-v5 .hx5-canal { display: inline-flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box;
  width: 17px; height: 17px; border-radius: 5.5px; color: #fff; vertical-align: -3px; }
html.hx-v5 .hx5-canal svg { width: 11px; height: 11px; stroke-width: 2.2; }
html.hx-v5 .hx5-canal-whatsapp { background: #25D366; }
html.hx-v5 .hx5-canal-instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
html.hx-v5 .helix-lead-row.is-active .hx5-canal { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }
html.hx-v5 .hx5m-meta .hx5-canal { margin-right: 6px; }

/* Entrada a la sugerencia de Helix Agent: tarjeta fina de la misma familia que «Helix Agent propone» (Alex, 24-09:
   el botón suelto se veía muy básico). Cada pantalla la muestra y le pone el margen (bandeja / movil-shell). */
html.hx-v5 .hx5-sugerir-btn { position: relative; isolation: isolate; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 9px 9px 9px 12px; border: 0; border-radius: 20px; font: inherit; text-align: left; color: var(--v5-t1); cursor: pointer;
  background: var(--v5-glass); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 .5px 0 var(--v5-hl), 0 0 0 .5px var(--v5-edge), 0 10px 26px -14px rgba(0, 0, 0, .4);
  animation: hx5-entra .45s var(--v5-eo) backwards; transition: transform .2s var(--v5-eo), box-shadow .2s var(--v5-eo); }
html.hx-v5 .hx5-sugerir-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: var(--v5-sig); opacity: .55; transition: opacity .2s var(--v5-eo);
  -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; }
html.hx-v5 .hx5-sugerir-btn:hover { transform: translateY(-1px);
  box-shadow: inset 0 .5px 0 var(--v5-hl), 0 0 0 .5px var(--v5-edge), 0 14px 30px -14px color-mix(in srgb, var(--v5-acc) 45%, transparent); }
html.hx-v5 .hx5-sugerir-btn:hover::before { opacity: 1; }
html.hx-v5 .hx5-sugerir-btn:active { transform: scale(.985); }
html.hx-v5 .hx5-sugerir-btn:focus-visible { outline: 2px solid var(--v5-acc); outline-offset: 2px; }
html.hx-v5 .hx5-sug-m { flex: none; width: 34px; height: 34px; line-height: 0; }
html.hx-v5 .hx5-sug-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html.hx-v5 .hx5-sug-t b { width: max-content; max-width: 100%; font-size: 12px; font-weight: 600;
  background: var(--v5-sig); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.hx-v5 .hx5-sug-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--v5-t2); }
html.hx-v5 .hx5-sug-cta { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 32px; padding: 0 10px 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #fff; background: var(--v5-acc); }
html.hx-v5 .hx5-sug-cta svg { width: 14px; height: 14px; }
@media (max-width: 1023.98px) {
  html.hx-v5 .hx5-sugerir-btn { gap: 11px; padding: 9px 9px 9px 11px; border-radius: 22px; background: var(--hx5m-prop, var(--v5-glass)); }
  html.hx-v5 .hx5-sug-m { width: 36px; height: 36px; }
  html.hx-v5 .hx5-sug-t b { font-size: 13px; }
  html.hx-v5 .hx5-sug-t span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal;
    font-size: 14.5px; line-height: 1.25; }
  html.hx-v5 .hx5-sug-cta { height: 36px; padding: 0 12px 0 15px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { html.hx-v5 .hx5-sugerir-btn { animation: none; transition: none; } }

/* Hojas largas con scroll: la cabecera fija se queda bajo el relleno de la hoja y por ese hueco asomaba lo que sube. */
html.hx-v5 .helix-app .helix-sheet[style*="overflow-y"] > .helix-sheet-header { background: #1A1D22; }
html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sheet[style*="overflow-y"] > .helix-sheet-header { background: #FFFFFF; }
html.hx-v5 .helix-app .helix-sheet[style*="overflow-y"] > .helix-sheet-header::before { content: ""; position: absolute; left: 0; right: 0;
  bottom: 100%; height: 26px; background: inherit; pointer-events: none; }