/* Helix · panel v5 · shell: todo cuelga de html.hx-v5 (plan: docs/plans/panel-v5-fd90).
   Barra lateral del prototipo (brasa + grafito en oscuro, clara «lb-b» en claro), plegable con
   animación (⌘\), hoja de cristal para el contenido y la cabecera integrada. Capas del prototipo que
   lo definen: v7, v7b, v8, v10, v11, v12 (gen.py). */

@media (min-width: 1024px) {
  /* ── Hoja: el área de trabajo es UNA lámina de cristal (el desenfoque va en ::before para no
     convertirla en bloque contenedor de lo que se fija con position:fixed). ── */
  html.hx-v5 .helix-app .helix-workspace { position: relative; isolation: isolate; border-radius: 28px; overflow: hidden;
    transition: box-shadow .35s var(--v5-eo); }
  html.hx-v5 .helix-app .helix-workspace::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: var(--v5-sheet); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
    box-shadow: var(--v5-sheetsh); transition: background .45s var(--v5-eo); }
  html.hx-v5 .helix-app .helix-split { gap: 0; }
  html.hx-v5 .helix-app .helix-tab-pane.is-active,
  html.hx-v5 .helix-app .helix-split-detail { background: transparent; border-radius: 0; box-shadow: none; border: 0; }
  html.hx-v5 .helix-app .helix-tab-pane.is-active::before, html.hx-v5 .helix-app .helix-tab-pane.is-active::after,
  html.hx-v5 .helix-app .helix-split-detail::before, html.hx-v5 .helix-app .helix-split-detail::after { content: none; }

  /* ── Cabecera: el título lo pinta cada pantalla dentro de la hoja; la fila de botones de siempre (avisos, ayuda,
     en vivo, cliente) pasa DENTRO de la barra lateral, encima de la cuenta (helix-v5-shell.js · pie). ── */
  html.hx-v5 .helix-app .helix-topbar { height: 0; min-height: 0; padding: 0; overflow: visible; border: 0; }
  html.hx-v5 .helix-app .helix-topbar-breadcrumb { display: none; }
  html.hx-v5 .helix-app .helix-topbar .hx-paleta-btn { display: none; }

  /* ── Barra lateral ── */
  html.hx-v5 .helix-app .helix-sidebar { box-sizing: border-box; width: 78px; margin: 0 14px 0 14px; padding: 16px 11px; border-radius: 26px; gap: 4px;
    color: #fff; position: relative; isolation: isolate; overflow: hidden;
    background: radial-gradient(130% 38% at 0% 0%, rgba(255, 105, 75, .3), transparent 72%),
                linear-gradient(180deg, rgba(46, 40, 44, .9) 0%, rgba(24, 22, 26, .93) 48%, rgba(15, 14, 17, .96) 100%);
    -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .65), 0 0 0 .5px rgba(255, 120, 90, .3),
                0 2px 4px rgba(0, 0, 0, .45), 0 22px 44px -14px rgba(0, 0, 0, .85), 0 40px 80px -30px rgba(255, 80, 50, .4);
    transition: width .55s var(--v5-eo), padding .55s var(--v5-eo), background .45s var(--v5-eo), box-shadow .35s var(--v5-eo); }
  html.hx-v5 .helix-app .helix-sidebar.is-expanded { width: 236px; padding: 16px 12px; border-radius: 26px; }
  html.hx-v5 .helix-app .helix-sidebar::after { content: none; }
  html.hx-v5 .helix-app .helix-sidebar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 0;
    background: linear-gradient(165deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, 0) 58%, rgba(255, 120, 90, .4) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
  html.hx-v5 .helix-app .helix-sidebar > * { position: relative; z-index: 1; }

  /* marca: el logo (H6) gira al plegar y el orbe late */
  html.hx-v5 .helix-app .helix-sidebar-brand { height: 44px; margin: 0 0 2px; padding: 2px 8px 12px; gap: 9px; justify-content: flex-start; color: #fff;
    text-decoration: none; transition: padding .5s var(--v5-eo), gap .5s var(--v5-eo); }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .helix-sidebar-brand { padding: 2px 0 12px 4px; gap: 0; }
  html.hx-v5 .helix-app .helix-sidebar-brand .helix-brand-mark { width: 26px; height: 26px; background: none; box-shadow: none; border: 0;
    transition: transform .6s cubic-bezier(.34, 1.4, .64, 1); }
  html.hx-v5 .helix-app .helix-sidebar-brand .helix-brand-mark::before,
  html.hx-v5 .helix-app .helix-sidebar-brand .helix-brand-mark::after { content: none; }
  html.hx-v5 .helix-app .helix-sidebar-brand .helix-brand-mark svg { width: 26px; height: 26px; color: var(--hx-logo-glifo); overflow: visible; }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .helix-brand-mark { transform: rotate(-360deg); }
  html.hx-v5 .helix-app .helix-sidebar-brand .hx5-logo { width: 26px; height: 26px; color: var(--hx-logo-glifo); overflow: visible; }
  html.hx-v5 .helix-app .helix-sidebar-brand .hx5-punto { transform-box: fill-box; transform-origin: center; animation: hx5-latido-logo 5.2s cubic-bezier(.22, 1, .36, 1) infinite; }
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar-brand .helix-brand-mark { background: none; box-shadow: none; border: 0; }
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar-brand .helix-brand-mark::before,
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar-brand .helix-brand-mark::after { content: none; }
  html.hx-v5 .helix-app .hx-auto-cabecera .t-h2 { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 34px; }
  html.hx-v5 .helix-app .helix-sidebar-brand-text { display: inline-block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: inherit; }
  html.hx-v5 .helix-app .hx5-plegar { position: absolute; right: 10px; top: 16px; width: 30px; height: 30px; border-radius: 9px; border: 0;
    background: transparent; color: inherit; opacity: .7; display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: opacity .2s var(--v5-eo), background .2s var(--v5-eo), right .5s var(--v5-eo), top .5s var(--v5-eo); }
  html.hx-v5 .helix-app .hx5-plegar:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
  html.hx-v5 .helix-app .hx5-plegar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  html.hx-v5 .helix-app .hx5-plegar .flecha { transition: transform .5s var(--v5-eo); transform-origin: 50% 50%; transform-box: fill-box; }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .hx5-plegar { right: 6px; top: 16px; }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .hx5-plegar .flecha { transform: rotate(180deg); }

  /* textos que se pliegan en su sitio (ancho y opacidad animados, escalonados) */
  html.hx-v5 .helix-app .helix-sidebar-item-label, html.hx-v5 .helix-app .helix-sidebar-brand-text,
  html.hx-v5 .helix-app .hx5-srch .t, html.hx-v5 .helix-app .hx5-srch kbd, html.hx-v5 .helix-app .hx5-hxa .tx,
  html.hx-v5 .helix-app .hx5-hxa kbd, html.hx-v5 .helix-app .hx5-acct .tx, html.hx-v5 .helix-app .hx5-acct .hx5-acct-chev {
    display: inline-block; max-width: 170px; overflow: hidden; white-space: nowrap; opacity: 1; transform: none;
    transition: max-width .5s var(--v5-eo), opacity .3s var(--v5-eo) calc(140ms + var(--n, 0) * 22ms), transform .45s var(--v5-eo) calc(120ms + var(--n, 0) * 22ms); }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) :is(.helix-sidebar-item-label, .helix-sidebar-brand-text, .hx5-srch .t, .hx5-srch kbd, .hx5-hxa .tx, .hx5-hxa kbd, .hx5-acct .tx, .hx5-acct .hx5-acct-chev) {
    max-width: 0; opacity: 0; transform: translateX(-10px); transition: max-width .45s var(--v5-eo), opacity .15s var(--v5-eo), transform .3s var(--v5-eo); }

  /* buscar y «Pregúntale a Helix» */
  html.hx-v5 .helix-app .hx5-srch { height: 34px; border-radius: 11px; border: 0; width: 100%; display: flex; align-items: center; gap: 8px; padding: 0 10px;
    margin: 0 0 12px; font: inherit; font-size: 13px; color: rgba(255, 255, 255, .82); cursor: pointer; text-align: left;
    background: rgba(0, 0, 0, .2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4), inset 0 -.5px 0 rgba(255, 255, 255, .05);
    transition: padding .5s var(--v5-eo), gap .5s var(--v5-eo), background .2s var(--v5-eo); }
  html.hx-v5 .helix-app .hx5-srch svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
  html.hx-v5 .helix-app .hx5-srch kbd { margin-left: auto; font-family: 'SF Mono', ui-monospace, 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255, 255, 255, .6); }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .hx5-srch { padding: 0 0 0 19px; gap: 0; }
  html.hx-v5 .helix-app .hx5-hxa { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 12px; padding: 8px 10px 8px 8px; border: 0; border-radius: 14px;
    text-align: left; color: #fff; font: inherit; cursor: pointer;
    background: linear-gradient(135deg, rgba(255, 110, 80, .26), rgba(255, 255, 255, .05) 70%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 0 0 .5px rgba(255, 140, 110, .25), 0 12px 26px -10px rgba(255, 80, 50, .55);
    transition: transform .25s var(--v5-eo), box-shadow .25s var(--v5-eo), padding .5s var(--v5-eo), gap .5s var(--v5-eo); }
  html.hx-v5 .helix-app .hx5-hxa:hover { transform: translateY(-1px); }
  html.hx-v5 .helix-app .hx5-hxa .tx b { display: block; font-size: 13.5px; font-weight: 600; }
  html.hx-v5 .helix-app .hx5-hxa .tx small { display: block; font-size: 11.5px; opacity: .78; }
  html.hx-v5 .helix-app .hx5-hxa kbd { margin-left: auto; font-family: 'SF Mono', ui-monospace, monospace; font-size: 11px; opacity: .7; }
  html.hx-v5 .helix-app .hx5-hxa .hx5-hxa-m { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; }
  html.hx-v5 .helix-app .hx5-hxa .hx5-hxa-m img { width: 34px; height: 34px; object-fit: contain; }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .hx5-hxa { padding: 6px 0 6px 10px; gap: 0; }

  /* grupos del menú (cápsula hundida) y sección «Configuración» */
  html.hx-v5 .helix-app .helix-sidebar-nav { padding: 0; gap: 0; display: flex; flex-direction: column; }
  html.hx-v5 .helix-app .helix-sidebar-indicador, html.hx-v5 .helix-app .helix-sidebar-gancho { display: none; }
  html.hx-v5 .helix-app .hx5-nav-g { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 5px; border-radius: 17px;
    background: rgba(0, 0, 0, .14); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), inset 0 -.5px 0 rgba(255, 255, 255, .05); }
  html.hx-v5 .helix-app .hx5-sh { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .6); padding: 12px 10px 4px; max-height: 40px; overflow: hidden;
    white-space: nowrap; transition: max-height .45s var(--v5-eo), opacity .25s var(--v5-eo), padding .45s var(--v5-eo); }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .hx5-sh { max-height: 10px; opacity: 0; padding-top: 0; padding-bottom: 0; }
  html.hx-v5 .helix-app .helix-sidebar .helix-sidebar-item { height: 36px; min-height: 36px; border-radius: 11px; padding: 0 10px; gap: 10px;
    justify-content: flex-start; color: #fff; font-size: 14px; font-weight: 400; text-shadow: none; background: transparent;
    transition: background .2s var(--v5-eo), color .2s var(--v5-eo), transform .15s var(--v5-eo), padding .5s var(--v5-eo), gap .5s var(--v5-eo); }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .helix-sidebar-item { padding: 0 0 0 18px; gap: 0; }
  html.hx-v5 .helix-app .helix-sidebar .helix-sidebar-item svg { width: 18px; height: 18px; color: rgba(255, 255, 255, .75); stroke-width: 1.7; flex-shrink: 0; overflow: visible; }
  html.hx-v5 .helix-app .helix-sidebar .helix-sidebar-item:not(.is-active):hover { background: rgba(255, 255, 255, .07); color: #fff; }
  html.hx-v5 .helix-app .helix-sidebar .helix-sidebar-item.is-active,
  html.hx-v5[data-theme="dark"] .helix-app .helix-sidebar .helix-sidebar-item.is-active { color: #fff; font-weight: 600;
    background: rgba(255, 255, 255, .09); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .16), 0 4px 10px -6px rgba(0, 0, 0, .6); }
  html.hx-v5 .helix-app .helix-sidebar .helix-sidebar-item.is-active svg { color: var(--v5-acc); }
  /* el icono activo es el mismo trazo en coral (sin la variante rellena) */
  html.hx-v5 .helix-app .helix-sidebar .is-active > .hx-ico { display: contents; }
  html.hx-v5 .helix-app .helix-sidebar .is-active > .hx-ico-fill { display: none; }
  html.hx-v5 .helix-app .hx5-bd { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8); transition: all .4s var(--v5-eo); }
  html.hx-v5 .helix-app .helix-sidebar-item.is-active .hx5-bd { color: #fff; }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .hx5-bd { position: absolute; top: 3px; left: 28px; min-width: 16px; height: 16px; border-radius: 8px; font-size: 10px;
    display: flex; align-items: center; justify-content: center; background: var(--v5-acc); color: #fff; padding: 0 4px; }
  /* marcador que sigue al ratón por el menú */
  html.hx-v5 .helix-app .hx5-gancho { position: absolute; left: 1px; top: 0; width: 2.5px; border-radius: 2px; background: var(--v5-acc); box-shadow: 0 0 6px var(--v5-acc);
    pointer-events: none; opacity: 0; transition: transform .42s cubic-bezier(.34, 1.3, .64, 1), height .2s var(--v5-eo), opacity .16s var(--v5-eo); }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .hx5-gancho { left: 0; }

  /* ── Pie: la fila de iconos (la .helix-topbar-actions de siempre, movida aquí) y la cuenta, que abre el selector
     de cliente. Van en el flujo de la barra: si no cabe todo, el menú encoge y se desplaza; nada se solapa. ── */
  html.hx-v5 .helix-app .helix-sidebar-footer { display: none; }
  html.hx-v5 .helix-app .helix-sidebar-nav { flex: 0 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
  html.hx-v5 .helix-app .helix-sidebar-nav::-webkit-scrollbar { display: none; }
  html.hx-v5 .helix-app .helix-sidebar-nav > * { flex-shrink: 0; }   /* se desplaza; nada se aplasta */
  html.hx-v5 .helix-app .hx5-pie { flex: none; display: flex; align-items: center; gap: 2px; margin: 10px 0 8px; padding: 4px; border-radius: 15px;
    background: rgba(0, 0, 0, .14); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), inset 0 -.5px 0 rgba(255, 255, 255, .05); }
  /* el <select> de cliente (lo sustituye el popover de la cuenta) y el botón de la paleta (el «Buscar» de arriba lo pulsa) siguen
     aquí, vivos pero ocultos */
  html.hx-v5 .helix-app .hx5-pie > :is(.helix-tenant-select, .helix-live-dot, .hx-paleta-btn) { display: none; }
  html.hx-v5 .helix-app .hx5-pie > .helix-campana { order: 1; }
  html.hx-v5 .helix-app .hx5-pie > .helix-ayuda-btn { order: 2; }
  html.hx-v5 .helix-app .hx5-pie > .hx5-tema { order: 3; }
  html.hx-v5 .helix-app .hx5-pie > .hx5-salir { order: 4; }
  html.hx-v5 .helix-app .hx5-pie > :is(.helix-campana, .helix-ayuda-btn, .hx5-tema, .hx5-salir) { position: relative; flex: 1 1 0; min-width: 0; width: auto;
    height: 32px; min-height: 32px; margin: 0; padding: 0; gap: 5px; border: 0; border-radius: 11px; display: inline-flex; align-items: center;
    justify-content: center; color: rgba(255, 255, 255, .72); background: transparent; box-shadow: none; opacity: 1; cursor: pointer; font: inherit;
    transition: background .2s var(--v5-eo), color .2s var(--v5-eo), transform .12s var(--v5-eo); }
  html.hx-v5 .helix-app .hx5-pie > :is(.helix-campana, .helix-ayuda-btn, .hx5-tema, .hx5-salir):hover { color: #fff; background: rgba(255, 255, 255, .08); }
  html.hx-v5 .helix-app .hx5-pie > :is(.helix-campana, .helix-ayuda-btn, .hx5-tema, .hx5-salir):active { transform: scale(.94); }
  html.hx-v5 .helix-app .hx5-pie > :is(.helix-campana, .helix-ayuda-btn, .hx5-tema, .hx5-salir):focus-visible { outline: 2px solid var(--v5-acc); outline-offset: -2px; }
  html.hx-v5 .helix-app .hx5-pie > .helix-ayuda-btn::before, html.hx-v5 .helix-app .hx5-pie > .helix-ayuda-btn::after { content: none; }
  html.hx-v5 .helix-app .hx5-pie > .helix-campana.has-count { color: #fff; }
  html.hx-v5 .helix-app .hx5-pie svg { width: 17px; height: 17px; flex: none; }
  html.hx-v5 .helix-app .hx5-pie > :is(.hx5-tema, .hx5-salir) svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  /* no leídos DENTRO de la campana: junto al icono con la barra abierta, en su esquina con la barra plegada */
  html.hx-v5 .helix-app .hx5-pie .helix-campana-badge { position: static; box-sizing: border-box; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
    align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; line-height: 17px; color: #fff; background: var(--v5-acc); box-shadow: none; }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .hx5-pie { flex-direction: column; margin: 8px 0; }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .hx5-pie > :is(.helix-campana, .helix-ayuda-btn, .hx5-tema, .hx5-salir) { flex: none; width: 100%; }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .hx5-pie .helix-campana-badge { position: absolute; top: 2px; right: 3px; min-width: 15px; height: 15px;
    padding: 0 4px; font-size: 9.5px; line-height: 15px; }
  /* la cuenta: con más de un cliente es el botón del selector (chevron); con uno solo, informa */
  html.hx-v5 .helix-app .hx5-acct { flex: none; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 10px;
    border: 0; border-radius: 16px; font: inherit; text-align: left; color: #fff; cursor: default;
    background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px -10px rgba(0, 0, 0, .8), 0 0 0 .5px rgba(255, 255, 255, .05);
    transition: padding .5s var(--v5-eo), gap .5s var(--v5-eo), background .2s var(--v5-eo); }
  html.hx-v5 .helix-app .hx5-acct.hx5-acct-elige { cursor: pointer; }
  html.hx-v5 .helix-app .hx5-acct.hx5-acct-elige:hover, html.hx-v5 .helix-app .hx5-acct.is-abierta { background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .07)); }
  html.hx-v5 .helix-app .hx5-acct:focus-visible { outline: 2px solid var(--v5-acc); outline-offset: 2px; }
  html.hx-v5 .helix-app .helix-sidebar:not(.is-expanded) .hx5-acct { padding: 9px 0 9px 12px; gap: 0; }
  html.hx-v5 .helix-app .hx5-acct .a { position: relative; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--v5-sig); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; }
  html.hx-v5 .helix-app .hx5-acct .a .ini { font-style: normal; }
  /* «en vivo»: el punto de siempre, ahora como estado en el avatar de la cuenta */
  html.hx-v5 .helix-app .hx5-acct .a .helix-live-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; margin: 0; border-radius: 50%;
    background: #8E8E93; opacity: 1; box-shadow: 0 0 0 2.5px rgba(22, 20, 24, .95); }
  html.hx-v5 .helix-app .hx5-acct .a .helix-live-dot[data-on="1"] { background: #30D158; box-shadow: 0 0 0 2.5px rgba(22, 20, 24, .95), 0 0 8px rgba(48, 209, 88, .55); }
  html.hx-v5 .helix-app .hx5-acct .tx { flex: 1; line-height: 1.25; min-width: 0; }
  html.hx-v5 .helix-app .hx5-acct .tx b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.hx-v5 .helix-app .hx5-acct .tx span { display: block; font-size: 11.5px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.hx-v5 .helix-app .hx5-acct .hx5-acct-chev { flex: none; width: 18px; height: 18px; color: rgba(255, 255, 255, .6); }
  html.hx-v5 .helix-app .hx5-acct:not(.hx5-acct-elige) .hx5-acct-chev { display: none; }
  html.hx-v5 .helix-app .hx5-acct-chev svg { width: 16px; height: 16px; margin: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  /* selector de cliente: popover de cristal (cuelga de .helix-app; el JS lo coloca encima de la cuenta o, plegada, a su lado) */
  html.hx-v5 .hx5-cuentas { position: fixed; z-index: 9000; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; padding: 8px;
    border-radius: 20px; color: var(--v5-t1); background: rgba(36, 32, 38, .9);
    -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
    box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .14), 0 0 0 .5px rgba(255, 255, 255, .1), 0 24px 60px -18px rgba(0, 0, 0, .75), 0 30px 70px -40px rgba(255, 80, 50, .45);
    opacity: 0; transform: translateY(6px) scale(.98); transform-origin: 20% 100%; transition: opacity .18s var(--v5-eo), transform .24s var(--v5-eo); }
  html.hx-v5 .hx5-cuentas.hx5-cu-lado { transform: translateX(-6px) scale(.98); transform-origin: 0 100%; }
  html.hx-v5 .hx5-cuentas.is-visible { opacity: 1; transform: none; }
  html.hx-v5 .hx5-cu-cab { flex: none; padding: 4px 8px 8px; font-size: 11.5px; font-weight: 600; color: var(--v5-t3); }
  html.hx-v5 .hx5-cu-bus { flex: none; display: flex; align-items: center; gap: 8px; height: 34px; margin: 0 0 6px; padding: 0 10px; border-radius: 11px;
    color: var(--v5-t3); background: rgba(0, 0, 0, .22); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4), inset 0 -.5px 0 rgba(255, 255, 255, .05); }
  html.hx-v5 .hx5-cu-bus svg { width: 15px; height: 15px; flex: none; }
  html.hx-v5 .hx5-cu-bus input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none;
    color: var(--v5-t1); font: inherit; font-size: 13px; }
  html.hx-v5 .hx5-cu-bus input::placeholder { color: var(--v5-t3); }
  html.hx-v5 .hx5-cu-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; outline: none; scrollbar-width: thin; }
  html.hx-v5 .hx5-cu-it { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; cursor: pointer; transition: background .15s var(--v5-eo); }
  html.hx-v5 .hx5-cu-it[hidden] { display: none; }
  html.hx-v5 .hx5-cu-it.is-activo { background: rgba(255, 255, 255, .08); }
  html.hx-v5 .hx5-cu-it .av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
  html.hx-v5 .hx5-cu-it.is-actual .av { color: #fff; background: var(--v5-sig); box-shadow: none; }
  html.hx-v5 .hx5-cu-it .tx { flex: 1; min-width: 0; line-height: 1.25; }
  html.hx-v5 .hx5-cu-it .tx b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.hx-v5 .hx5-cu-it.is-actual .tx b { font-weight: 600; }
  html.hx-v5 .hx5-cu-it .tx small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--v5-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.hx-v5 .hx5-cu-it .ok { flex: none; width: 18px; height: 18px; color: var(--v5-acc); }
  html.hx-v5 .hx5-cu-it .ok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
  html.hx-v5 .hx5-cu-vacio { padding: 16px 8px 12px; font-size: 12.5px; color: var(--v5-t3); text-align: center; }

  /* ── micro-animación de los iconos del menú (v10 del prototipo) ── */
  html.hx-v5 .helix-app .helix-sidebar-item svg * { transform-box: fill-box; }
  html.hx-v5 .helix-app .ic-kanban rect { transform-origin: 50% 0; }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-kanban .k1 { animation: hx5-kcol .6s cubic-bezier(.34, 1.56, .64, 1); }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-kanban .k2 { animation: hx5-kcol .6s .07s cubic-bezier(.34, 1.56, .64, 1); }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-kanban .k3 { animation: hx5-kcol .6s .14s cubic-bezier(.34, 1.56, .64, 1); }
  html.hx-v5 .helix-app .ic-cal .hoja-cal { transform-origin: 50% 0; }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-cal .hoja-cal { animation: hx5-calgira .7s cubic-bezier(.34, 1.56, .64, 1); }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-cal .anilla { animation: hx5-anilla .7s ease; }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-db .d1 { animation: hx5-dsube .6s cubic-bezier(.34, 1.56, .64, 1); }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-db .d3 { animation: hx5-dsube .6s .08s cubic-bezier(.34, 1.56, .64, 1); }
  html.hx-v5 .helix-app .ic-chart .b1, html.hx-v5 .helix-app .ic-chart .b2, html.hx-v5 .helix-app .ic-chart .b3 { transform-origin: 50% 100%; }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-chart .b1 { animation: hx5-barra .7s cubic-bezier(.34, 1.56, .64, 1); }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-chart .b2 { animation: hx5-barra .7s .08s cubic-bezier(.34, 1.56, .64, 1); }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-chart .b3 { animation: hx5-barra .7s .16s cubic-bezier(.34, 1.56, .64, 1); }
  html.hx-v5 .helix-app .ic-target circle { transform-origin: 50% 50%; }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-target .t1 { animation: hx5-onda .8s ease-out; }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-target .t2 { animation: hx5-onda .8s .1s ease-out; }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-target .t3 { animation: hx5-diana .5s cubic-bezier(.34, 1.56, .64, 1); }
  html.hx-v5 .helix-app .ic-bot .antena { transform-origin: 50% 100%; }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-bot .antena { animation: hx5-antena .7s ease; }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-bot .ojos-b { animation: hx5-parpa .5s .15s ease; transform-origin: 50% 50%; }
  html.hx-v5 .helix-app .ic-sliders circle { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-sliders .s1 { transform: translateX(-6px); }
  html.hx-v5 .helix-app .helix-sidebar-item:hover .ic-sliders .s2 { transform: translateX(6px); }
}

/* ── Modo claro «lb-b»: barra clara sobre fondo cálido suave (sin blanco sobre blanco) ── */
@media (min-width: 1024px) {
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar { color: var(--v5-t1);
    background: radial-gradient(130% 38% at 0% 0%, rgba(255, 120, 90, .2), transparent 72%),
                linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(248, 246, 245, .92) 55%, rgba(240, 237, 236, .94) 100%);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .06), 0 0 0 .5px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .12),
                0 22px 44px -14px rgba(40, 10, 0, .45), 0 50px 90px -34px rgba(255, 80, 50, .5); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar::before { background: linear-gradient(165deg, #fff, rgba(255, 255, 255, .2) 35%, rgba(255, 255, 255, 0) 60%, rgba(255, 120, 90, .35) 100%); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar-brand { color: var(--v5-t1); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar-brand .helix-brand-mark svg { color: var(--hx-logo-glifo); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-plegar:hover { background: rgba(0, 0, 0, .06); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar .helix-sidebar-item { color: var(--v5-t1); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar .helix-sidebar-item svg { color: var(--v5-t2); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar .helix-sidebar-item:not(.is-active):hover { background: rgba(0, 0, 0, .04); color: var(--v5-t1); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar .helix-sidebar-item.is-active { color: var(--v5-t1);
    background: linear-gradient(180deg, #fff, #FAF8F7); box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0, 0, 0, .08), 0 8px 16px -8px rgba(60, 20, 10, .35); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar .helix-sidebar-item.is-active svg { color: var(--v5-acc); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-bd { color: var(--v5-t2); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .helix-sidebar-item.is-active .hx5-bd { color: var(--v5-acc); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-sh { color: var(--v5-t3); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-nav-g { background: rgba(30, 20, 20, .045); box-shadow: inset 0 1.5px 3px rgba(40, 20, 10, .12), inset 0 -.5px 0 #fff; }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-srch { color: var(--v5-t2); background: rgba(30, 20, 20, .05); box-shadow: inset 0 1.5px 3px rgba(40, 20, 10, .12), inset 0 -.5px 0 #fff; }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-srch kbd { color: var(--v5-t3); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-hxa { color: var(--v5-t1); background: linear-gradient(135deg, rgba(255, 120, 90, .18), #fff 70%);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(255, 110, 80, .35), 0 12px 26px -10px rgba(255, 80, 50, .45); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-acct { color: var(--v5-t1); background: linear-gradient(180deg, #fff, #F7F5F4);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0, 0, 0, .07), 0 10px 22px -10px rgba(60, 20, 10, .3); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-acct .tx span { color: var(--v5-t2); opacity: 1; }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-acct.hx5-acct-elige:hover,
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-acct.is-abierta { background: linear-gradient(180deg, #fff, #F1EEED); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-acct .hx5-acct-chev { color: var(--v5-t3); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-acct .a .helix-live-dot { box-shadow: 0 0 0 2.5px #fff; }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-acct .a .helix-live-dot[data-on="1"] { box-shadow: 0 0 0 2.5px #fff, 0 0 8px rgba(48, 209, 88, .45); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-pie { background: rgba(30, 20, 20, .045); box-shadow: inset 0 1.5px 3px rgba(40, 20, 10, .12), inset 0 -.5px 0 #fff; }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-pie > :is(.helix-campana, .helix-ayuda-btn, .hx5-tema, .hx5-salir) { color: var(--v5-t2); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-pie > :is(.helix-campana, .helix-ayuda-btn, .hx5-tema, .hx5-salir):hover,
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-pie > .helix-campana.has-count { color: var(--v5-t1); }
  html.hx-v5:not([data-theme="dark"]) .helix-app .hx5-pie > :is(.helix-campana, .helix-ayuda-btn, .hx5-tema, .hx5-salir):hover { background: rgba(0, 0, 0, .05); }
  html.hx-v5:not([data-theme="dark"]) .hx5-cuentas { background: rgba(255, 255, 255, .92);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0, 0, 0, .1), 0 24px 60px -18px rgba(60, 20, 10, .35), 0 30px 70px -40px rgba(255, 80, 50, .35); }
  html.hx-v5:not([data-theme="dark"]) .hx5-cu-bus { background: rgba(30, 20, 20, .05); box-shadow: inset 0 1.5px 3px rgba(40, 20, 10, .12), inset 0 -.5px 0 #fff; }
  html.hx-v5:not([data-theme="dark"]) .hx5-cu-it.is-activo { background: rgba(0, 0, 0, .05); }
}

@keyframes hx5-kcol { 40% { transform: scaleY(.55); } }
@keyframes hx5-calgira { 30% { transform: rotate(-9deg); } 65% { transform: rotate(5deg); } }
@keyframes hx5-anilla { 30% { transform: translateY(-1.5px); } }
@keyframes hx5-dsube { 40% { transform: translateY(-2.5px); } }
@keyframes hx5-barra { 0% { transform: scaleY(.2); } }
@keyframes hx5-onda { 40% { transform: scale(1.18); opacity: .6; } }
@keyframes hx5-diana { 50% { transform: scale(2.4); } }
@keyframes hx5-antena { 25% { transform: rotate(-18deg); } 60% { transform: rotate(14deg); } }
@keyframes hx5-parpa { 50% { transform: scaleY(.1); } }
@keyframes hx5-latido-logo { 0%, 40% { transform: scale(1); } 48% { transform: scale(1.35); } 58%, 100% { transform: scale(1); } }