/* ============================================================
   Quantium — theme.css  ·  GENERADO desde /tokens.json (NO EDITAR A MANO)
   Para cambiar el diseño global: editar /tokens.json y correr
   `python3 tools/build_tokens.py`. Editar acá se pierde en el próximo build
   (build.py corre --check y falla si theme.css quedó fuera de sync).
   Fuente + compilador: /tokens.json · tools/build_tokens.py
   ============================================================ */

:root{
  /* superficies / líneas (dark = "Glow Terminal": navy frío neutro, sin tinte cálido, para que el cian/glow y el semáforo se lean puros) */
  --bg:#070b14; --surface:#0c1422; --surface2:#0f1a2c; --ground:#070b14; --plot:#0a1120; --plot-2:#0b1526; --line:#1b2b47; --line2:#26395c;
  /* marca (acento frío cian + gradiente hielo→periwinkle; SIN oro/cobre — dirección Glow Terminal) */
  --accent:#5cc7e6; --accent-lo:rgba(92,199,230,.1); --accent-md:rgba(92,199,230,.22); --gold:#8098ff; --gold-lo:rgba(128,152,255,.12); --gold-md:rgba(128,152,255,.32); --copper:#5b8fd0; --copper-lo:rgba(91,143,208,.12); --copper-md:rgba(91,143,208,.3); --orange:#7a5fe6; --orange-lo:rgba(122,95,230,.12); --orange-md:rgba(122,95,230,.32); --grad-brand:linear-gradient(115deg,#5cc7e6,#8098ff);
  /* texto (--txt-3 cumple WCAG AA 4.5:1 sobre las superficies navy; --txt-4 solo bordes/decoración) */
  --txt:#eaf1fb; --txt-2:#9fb2d0; --txt-3:#7e91b4; --txt-4:#33425f;
  /* semáforo / datos (verde=sube/positivo, rojo=baja/negativo, azul=dato neutro) — INTACTO */
  --green:#07c074; --red:#ef3535; --blue:#4e9eff; --green-lo:rgba(7,192,116,.1); --red-lo:rgba(239,53,53,.1);
  /* series categóricas (charts multi-serie: GEX/DEX/VEX/Vanna…). Paleta CVD-safe validada (dark, banda L 0.48–0.67, chroma≥.1, ΔE daltónico≥12, contraste≥3). Orden fijo. Funcionan igual en dark y claro. */
  --series-1:#2384b4; --series-2:#7a5fe6; --series-3:#1f9e8c; --series-4:#c95fae; --series-5:#c67a2a; --series-6:#5b8fd0;
  /* escala divergente canónica (heatmaps / valores con signo): neg ↔ mid(neutro frío, se funde con el fondo) ↔ pos. --div-mid se redefine en claro. */
  --div-neg:#ef3535; --div-mid:#26324a; --div-pos:#07c074;
  /* radios / layout (--sidebar = escalar sin unidad que el JS multiplica) */
  --r:0px; --r-sm:0px; --r-0:0px; --sidebar:22;
  /* movimiento (curvas de easing + duraciones) */
  --ease:cubic-bezier(.2,.7,.3,1); --ease-soft:cubic-bezier(.32,.72,0,1); --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --dur-press:120ms; --dur-hover:180ms; --dur-panel:260ms; --dur-shimmer:1.4s; --dur-collapse:600ms; --dur-slide:300ms; --ease-smooth:cubic-bezier(.4,0,.2,1);
  /* tipografía (stacks centralizados). Fuente REAL del sitio = Montserrat (única cargada). */
  --font-ui:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --font-num:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; --font-display:'Montserrat',system-ui,sans-serif; --font-mono:ui-monospace,'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  /* escala de espaciado (ritmo consistente; usar en vez de px sueltos) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:28px;
  /* tokens file-specific (colores propios de tools puntuales; el comentario indica qué tool los consume) */
  --dem:#4e9eff; --gop:#ef3535; --call:#00C896; --put:#FF4757; --cw:#9a7bf0; --pw:#ff5f8f; --whale:#c95fae; --bias-vbull:#15803d; --bias-bull:#22c55e; --bias-bear:#dc2626; --bias-vbear:#991b1b; --bias-neutral:#f59e0b; --ccy-eur:#FF3B3B; --ccy-jpy:#29D3E8; --ccy-gbp:#2EE06E; --ccy-aud:#5B5BFF; --ccy-chf:#5b8fd0; --ccy-cad:#B14CF0; --ccy-nzd:#FF2FA0; --cr-teal:#22c9a8; --cr-liqtag:#e8403a; --cr-fng-greed:#7cc47c; --scene-deep:#12617f; --scene-mid:#2f93b8; --pur:#a855f7; --purple:#a78bfa; --grn2:var(--green); --red2:var(--red); --grad:var(--grad-brand); --mc:var(--accent); --cyan:#5cc7e6; --cyan-lo:rgba(92,199,230,.08); --cyan-glow:rgba(92,199,230,.25);
  /* aliases (nombres legacy) → canónico. Cada uno apunta vía var() al canónico. NO borrar: romperían archivos que los referencian. */
  --surf:var(--surface); --sur:var(--surface); --bg2:var(--surface); --sur2:var(--surface2); --surf2:var(--surface2); --ln:var(--line); --ln2:var(--line2); --acc:var(--accent); --acc-lo:var(--accent-lo); --acc-md:var(--accent-md); --txt2:var(--txt-2); --txt3:var(--txt-3); --txt4:var(--txt-4); --grn:var(--green); --yel:var(--gold); --yellow:var(--gold);
}

[data-theme="light"]{
  /* Pergamino FRÍO, no blanco puro: el blanco puro cansa en jornadas largas de mesa, y un tinte azulado mantiene la marca (un mundo frío, iluminado). */
  --bg:#eef1f6; --surface:#ffffff; --surface2:#f4f7fb; --ground:#eef1f6; --plot:#ffffff; --plot-2:#f8fafc; --line:#d8dfe9; --line2:#c2ccdb;
  /* Mismos TONOS que el navy, oscurecidos hasta pasar contraste sobre #eef1f6/#fff (validado ≥3:1). */
  --accent:#0e7fa6; --accent-lo:rgba(14,127,166,.10); --accent-md:rgba(14,127,166,.22); --gold:#3f52c9; --gold-lo:rgba(63,82,201,.10); --gold-md:rgba(63,82,201,.26); --copper:#2f6bab; --copper-lo:rgba(47,107,171,.10); --copper-md:rgba(47,107,171,.26); --orange:#5b3fc4; --orange-lo:rgba(91,63,196,.10); --orange-md:rgba(91,63,196,.26); --grad-brand:linear-gradient(115deg,#0e7fa6,#3f52c9);
  /* Grafito-navy, no negro puro: el negro sobre blanco vibra. El CROMO es neutro y de máximo contraste contra SU fondo (blanco en oscuro, grafito en claro); el color vive solo en los datos. */
  --txt:#0f1729; --txt-2:#47566e; --txt-3:#6b7a92; --txt-4:#a3aec0;
  /* SEMÁFORO: mismo tono, oscurecido. El verde/rojo del navy son ilegibles sobre blanco (2.4:1 / 4.0:1). */
  --green:#0a8f57; --red:#c81e1e; --blue:#1a6fd4; --green-lo:rgba(10,143,87,.10); --red-lo:rgba(200,30,30,.10);
  /* El medio de la rampa divergente es un NEUTRO CLARO, no el navy #26324a. */
  --div-neg:#c81e1e; --div-mid:#dfe4ec; --div-pos:#0a8f57;
  /* Overrides file-specific del claro. */
  --cyan:#0e7fa6;
  /* Derivadas de las navy CONSERVANDO EL TONO (que es lo validado CVD-safe) y bajando L hasta contraste ≥3.5 sobre #eef1f6. Dos quedan idénticas. */
  --series-1:#2384b4; --series-2:#7a5fe6; --series-3:#00907f; --series-4:#c259a8; --series-5:#b86e18; --series-6:#4e82c2;
}

[data-theme="navy"]{
  --bg:#070b14; --surface:#0c1422; --surface2:#0f1a2c; --ground:#070b14; --plot:#0a1120; --plot-2:#0b1526; --line:#1b2b47; --line2:#26395c;
  --txt:#eaf1fb; --txt-2:#9fb2d0; --txt-3:#7e91b4;
  --green-lo:rgba(7,192,116,.1); --red-lo:rgba(239,53,53,.1);
}

[data-theme="black"]{
  --bg:#000000; --surface:#070a10; --surface2:#0c1018; --ground:#000000; --plot:#04070e; --plot-2:#090f1b; --line:#141d30; --line2:#1f2c46;
  --div-mid:#121826;
}

/* Scrollbar — más ancha, redondeada e inset (thumb con borde transparente + background-clip) para agarrarla mejor */
html{scrollbar-width:thin;scrollbar-color:var(--line2) transparent;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:var(--r-sm);border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--txt-3,#7e91b4);background-clip:padding-box;}

/* Números tabulares — alinea los dígitos en columnas (precios, %, tablas). Aplicar .tnum al contenedor. */
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* Segmentado de familia (tabs: Total·0DTE·1DTE / Total·Calls·Puts…) — UN control compartido para toda una familia.
   .qseg--c lo centra en su fila (molde Barras · Variante 2). Activo = .on o [aria-selected="true"] → teal (marca).
   .seg = alias del mismo control (dialecto unificado 2026-07-07) → mismo estilo desde esta única fuente. */
.qseg,.seg,.nd-seg,.sp-seg,.pc-toggle,.hmode,.toggle-group,.tabs,.src,.as-tabs{display:inline-flex;background:transparent;border:0;border-radius:var(--r-sm);padding:0;gap:6px;}
.qseg--c{margin-left:auto;margin-right:auto;}
.qseg button,.seg button,.nd-seg button,.sp-seg button,.pc-toggle button,.hmode button,.toggle-group button,.tabs button,.src button,.mtabs button,.cr-chips button,.cats button,.btn-tg,.tab,.btn-toggle,.vtab,.tb-tab,.as-tab,.fx-ana-tab,.fx-fbtn,.fx-pairs-btn,.chip-pick,.cv-ws-tab,.gx-nowbtn{font:inherit;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:-.01em;border:1px solid var(--line2);background:var(--plot);color:var(--txt-2);padding:4px 11px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;}
.qseg button:hover,.seg button:hover,.nd-seg button:hover,.sp-seg button:hover,.pc-toggle button:hover,.hmode button:hover,.toggle-group button:hover,.tabs button:hover,.src button:hover,.mtabs button:hover,.cr-chips button:hover,.cats button:hover,.btn-tg:hover,.tab:hover,.btn-toggle:hover,.vtab:hover,.tb-tab:hover,.as-tab:hover,.fx-ana-tab:hover,.fx-fbtn:hover,.fx-pairs-btn:hover,.chip-pick:hover,.cv-ws-tab:hover,.gx-nowbtn:hover{color:var(--txt);}
.qseg button.on,.qseg button[aria-selected="true"],.seg button.on,.seg button[aria-selected="true"],.nd-seg button.on,.sp-seg button.on,.pc-toggle button.on,.hmode button.on,.tabs button.on,.src button.on,.mtabs button.on,.cr-chips button.on,.cats button.on,.btn-tg.active,.tab.active,.tab.on,.btn-toggle.active,.vtab.on,.tb-tab.on,.as-tab.on,.fx-ana-tab.on,.fx-fbtn.on,.fx-pairs-btn.on,.chip-pick.on,.cv-ws-tab.active{background:var(--accent);color:var(--bg);border-color:var(--accent);box-shadow:0 0 12px var(--accent-md);}
/* Chip "0DTE"/"0DTE · Próx." SELECCIONADO — clon del badge "Stop Loss" (forex.html): rojo + glow +
   tipografía chica/bold/uppercase + esquina cuadrada + brillo que barre el chip cada tanto (no en
   loop continuo — pausa entre pasadas), elegido por el owner tras iterar color/glow/velocidad.
   Se agrega .chip-odte al botón (workspace.js modeHTML + los segmentos internos de los tools de
   Opciones); el formato solo se ve si ADEMÁS está .on/.active (seleccionado) — si no, es un botón
   normal. El brillo es un ::after posicionado (no background-position en loop): con repeat de
   background, una franja centrada en un tile más ancho que el elemento asoma DOS veces por vuelta
   — se ve como "barrido doble". Un pseudo-elemento que entra y sale una vez no tiene ese bug. */
@keyframes qn-chip-sweep{0%,45%{left:-60%;}80%{left:160%;}100%{left:160%;}}
.src button.on.chip-odte,.seg button.on.chip-odte,.qseg button.on.chip-odte,.nd-seg button.on.chip-odte,.btn-tg.active.chip-odte{position:relative;overflow:hidden;background:var(--red);color:#fff;border-color:var(--red);font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:0;box-shadow:0 0 6px var(--red);}
.on.chip-odte::after,.active.chip-odte::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);animation:qn-chip-sweep 4.6s ease-in-out infinite;}
.qseg button:focus-visible,.seg button:focus-visible,.nd-seg button:focus-visible,.sp-seg button:focus-visible,.pc-toggle button:focus-visible,.hmode button:focus-visible,.toggle-group button:focus-visible,.tabs button:focus-visible,.btn-tg:focus-visible,.tab:focus-visible,.btn-toggle:focus-visible,.vtab:focus-visible,.tb-tab:focus-visible,.as-tab:focus-visible,.fx-ana-tab:focus-visible,.fx-fbtn:focus-visible,.fx-pairs-btn:focus-visible,.chip-pick:focus-visible,.cv-ws-tab:focus-visible,.gx-nowbtn:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}

/* ── Header canónico (.tc-hd) — UN header para tools, secciones y subsecciones ──
   REGLA: ≤5 opciones fijas y excluyentes = CHIP (.qseg centrado con .qseg--c, MÁX 2 grupos por header);
   >5 / lista larga / ticker / sección = DROPDOWN (.tc-dd). SIN indicador "en vivo".
   Acciones SIEMPRE a la derecha (.tc-act), en orden: [ticker ▾ .tc-dd.tk] [⊟ split] [⤢ full] [× cerrar] (.tc-btn).
   Dropdown primario opcional a la IZQUIERDA (junto al título). Dos niveles: sección + tool (.tc-hd--sub = más chato). */
.tc-hd{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 12px;background:var(--surface2);border-bottom:1px solid var(--line);flex:none;font-family:'Montserrat',sans-serif;}
.tc-hd--sub{min-height:36px;background:var(--surface);}
.tc-t{font-size:12.5px;font-weight:700;color:var(--txt);letter-spacing:.2px;white-space:nowrap;}
.tc-t .s{font-weight:500;color:var(--txt-3);margin-left:9px;font-size:11px;}   /* subtítulo inline */
.tc-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;}   /* zona central: 1-2 grupos de chips centrados */
.tc-act{display:inline-flex;align-items:center;gap:6px;margin-left:auto;}       /* ticker + acciones, empujados a la derecha */
.tc-btn{width:28px;height:26px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--txt-2);cursor:pointer;padding:0;transition:color .15s,border-color .15s;}
.tc-btn:hover{color:var(--txt);border-color:var(--line2);}
.tc-btn svg{width:13px;height:13px;pointer-events:none;}
.tc-btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}
.tc-dd{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px;font:inherit;font-size:11.5px;font-weight:600;color:var(--txt);cursor:pointer;white-space:nowrap;}
.tc-dd:hover{border-color:var(--line2);}
.tc-dd svg{width:11px;height:11px;color:var(--txt-3);pointer-events:none;}
.tc-dd.tk{font-variant-numeric:tabular-nums;}          /* ticker: dígitos alineados */
.tc-sel,.gp-sel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 9px;font:inherit;font-size:11px;font-weight:600;color:var(--txt);cursor:pointer;}   /* <select> nativo con estética de header (fuente/ticker) */
.tc-sel:hover,.gp-sel:hover{border-color:var(--line2);}
.tc-sel.tk{font-variant-numeric:tabular-nums;}
.tc-hd .qseg{background:transparent;}                  /* el contenedor no pinta: cada chip es su propia píldora */

/* ── Registros de datos de Quantium — DOS variantes, mismo shell (.qtbl-card/.qtbl-scroll) ──
   1) .qrow (card-rows, POR DEFECTO): la elegida por el owner tras ~30 variantes comparadas en
      assets/tools/skin-tables.html (secciones F/H/I). Úsala salvo pedido explícito de tabla real.
   2) table.qtbl (tabla clásica): se mantiene para cuando haga falta semántica tabular real
      (exportar/copiar como datos — ej. Scanner de flujo_inusual, 8 columnas). NO es la opción
      muerta: conviven a propósito, decisión con el advisor 2026-07-13.
   Ninguna tiene zebra-striping. Estados de fila (ROBUSTEZ, ver AGENTS.md): mismas clases
   .qtbl-empty/.qtbl-error/.qtbl-loading en las dos variantes — vacío ≠ error, nunca e.message crudo. */
.qtbl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.qtbl-scroll{overflow:auto;}

/* ── 1) .qrow — card-rows ──
   CADA FILA ES SU PROPIA CARD (fondo --surface2, radio 9px), separadas por AIRE (gap), NUNCA
   pegadas con línea divisoria — es la diferencia central con una tabla y con la 1ª implementación
   de esto (2026-07-13, corregida el mismo día tras ver el resultado en datos reales: había quedado
   como fila-con-borde-inferior, que es exactamente la tabla vieja que el owner rechazó de nuevo).
   El mockup real (assets/tools/skin-tables.html, sección "H · Card compacta") es la fuente de
   verdad visual — si dudás de un valor, mirá ahí antes de improvisar.
   Estructura: .qtbl-card > .qtbl-head (fila de labels, FUERA del scroll → sticky gratis, sin
   position:sticky) + .qtbl-scroll.qtbl-rows (host real de QTable.pager — insertAdjacentElement
   'afterend' deja el pie hermano, adentro de la card) > N × .qrow. El placeholder de estado va
   COMO ÚNICO HIJO de .qtbl-rows, nunca reemplazando el host (el pie de paginador queda huérfano si no).
   .qtbl-head y .qrow comparten la MISMA grilla vía --qtbl-cols (la define cada tool en su
   .qtbl-card, ej. "28px 1fr 90px") — así no se pueden desalinear con un cambio suelto. El padding
   de .qtbl-head (20px) = el padding de .qtbl-rows (8px) + el padding propio de .qrow (12px): si
   tocás uno de los tres, recalculá para que las columnas del header sigan alineadas con las filas.
   Piezas reusables dentro de una celda de .qrow: .qrow-av (avatar de iniciales) · .qrow-bar
   (barra de magnitud — color Y ancho escalan con la magnitud, ver JS del tool; .bi = variante
   bidireccional para columnas con signo, con .mid/.fill.pos/.fill.neg) · .qrow-val (el valor:
   blanco+negrita por defecto — columnas siempre positivas; .pos/.neg lo colorea por signo).
   .qrow--tint = variante F (tiñe la fila entera según magnitud en vez de barra, en vez del fondo
   --surface2 fijo) — RESERVA, no es el default; usarla solo si la barra se siente muy cargada.
   REGLA DEL OWNER (2026-07-13, encontrado en flujo_inusual y reforzada tras ver insider.html en
   real): dentro de una fila, TODO texto de dato es var(--txt) blanco + negrita, o el color
   semántico del dato (verde/rojo por signo) + negrita — NUNCA "gris débil" (--txt-2/--txt-3) en
   una celda de dato real, tampoco en "texto secundario" tipo montos por tier (amt-lg/md/sm) —
   ESE PATRÓN QUEDA PROHIBIDO, todo dato va al mismo peso visual. --txt-3 queda SOLO para: los
   labels del header (.qtbl-head — es UI de navegación, no dato) y placeholders de ausencia de
   dato (ej. el '—' de una columna sin flags). */
.qtbl-head{display:grid;grid-template-columns:var(--qtbl-cols,auto 1fr auto);align-items:center;gap:10px;
  padding:10px 20px 6px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-3);white-space:nowrap;}
.qtbl-head>.r{text-align:right;}
/* Eyebrow label genérico — mismo look tipográfico que .qtbl-head (headers de tabla) pero SIN su
   contrato de grilla (display:grid/--qtbl-cols/padding de alineación): para títulos de sección,
   labels de KPI, headers de card sueltos, etc. fuera de una tabla. --eyebrow-fs deja escapar el
   tamaño (7-11px según cuán apretado esté el layout) sin generar overrides bespoke por archivo.
   --eyebrow-ls (default .08em, el de "Name of Bank") solo se abre en texto genuinamente chico
   (≤8px): mayúsculas muy chicas se amontonan con tracking apretado — ahí SÍ hace falta más aire,
   no es capricho de archivo. En 9px+ el default ya es legible, no aflojar "porque sí". */
.qn-eyebrow{font-size:var(--eyebrow-fs,9px);font-weight:700;letter-spacing:var(--eyebrow-ls,.08em);text-transform:uppercase;color:var(--txt-3);}
/* Variante --hi: mismo molde tipográfico pero color/peso de máximo contraste (blanco, weight 600)
   en vez de gris tenue — para labels de KPI/panel donde el gris ya se probó y no se leía (ver
   comentario de .tbl th en forex.html). Regla (b) de AGENTS.md: el cromo va al contraste máximo
   contra su fondo; el gris tenue es solo para UI de navegación secundaria (headers de tabla). */
.qn-eyebrow--hi{font-weight:600;color:var(--txt);}
.qtbl-rows{display:flex;flex-direction:column;gap:6px;padding:0 8px 8px;}
.qrow{display:grid;grid-template-columns:var(--qtbl-cols,auto 1fr auto);align-items:center;gap:10px;
  padding:10px 12px;background:var(--surface2);border-radius:var(--r);font-size:12px;}
.qrow:hover{filter:brightness(1.08);}
.qrow.sel{background:var(--accent-lo);box-shadow:inset 2px 0 0 var(--accent);}
.qrow-av{width:22px;height:22px;border-radius:50%;background:var(--accent-lo);color:var(--accent);
  font-family:var(--font-mono);font-size:9px;font-weight:700;display:flex;align-items:center;
  justify-content:center;flex:none;}
.qrow-tk{font-family:var(--font-mono);font-weight:700;color:var(--txt);}
/* Combos de celda (una columna de la grilla que junta 2 piezas): .qrow-id = avatar+ticker,
   .qrow-mag = barra+valor (la barra se estira, el valor queda fijo a la derecha). */
.qrow-id{display:flex;align-items:center;gap:7px;min-width:0;}
.qrow-mag{display:flex;align-items:center;gap:8px;min-width:0;}
.qrow-mag .qrow-bar{flex:1;}
.qrow-mag .qrow-val{flex:none;}
.qrow-bar{position:relative;height:14px;}
.qrow-bar .fill{position:absolute;top:1px;bottom:1px;left:0;border-radius:var(--r-sm);}
.qrow-bar.bi .mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line2);}
.qrow-bar.bi .fill.pos{left:50%;right:auto;}
.qrow-bar.bi .fill.neg{right:50%;left:auto;}
.qrow-val{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-weight:700;
  color:var(--txt);text-align:right;white-space:nowrap;}
.qrow-val.pos{color:var(--green);}
.qrow-val.neg{color:var(--red);}
/* .qrow--tint no necesita CSS propio: hereda radio/fondo de .qrow, el tool solo pisa `background`
   inline por fila (mezcla verde/rojo según magnitud, ver variante F del mockup). */
.qtbl-rows .qtbl-empty,.qtbl-rows .qtbl-error,.qtbl-rows .qtbl-loading{padding:32px 14px;text-align:center;color:var(--txt-3);font-size:12.5px;}
.qtbl-rows .qtbl-error{color:var(--red);}

/* ── 2) table.qtbl — tabla clásica (usa el mismo .qtbl-card/.qtbl-scroll de arriba) ──
   El <thead> se pega (position:sticky) contra .qtbl-scroll — por eso NUNCA overflow:hidden en
   .qtbl-scroll, solo en la card. Alineación: texto a la izquierda por defecto; .r en <th>/<td>
   para columnas numéricas (no al revés). */
.qtbl{width:100%;border-collapse:collapse;font-family:'Montserrat',sans-serif;}
.qtbl thead th{position:sticky;top:0;z-index:2;background:var(--surface2);color:var(--txt);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;}
.qtbl thead th.r{text-align:right;}
.qtbl tbody td{padding:10px 14px;font-size:12px;color:var(--txt-2);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.qtbl tbody td.r{text-align:right;}
.qtbl tbody td.strong{color:var(--txt);font-weight:600;}
.qtbl tbody tr:last-child td{border-bottom:none;}
.qtbl tbody tr:hover td{background:rgb(from var(--accent) r g b / .045);}
.qtbl tbody tr.sel td{background:var(--accent-lo);box-shadow:inset 2px 0 0 var(--accent);}
.qtbl tbody tr.sel:hover td{background:var(--accent-lo);}
.qtbl-empty td,.qtbl-error td,.qtbl-loading td{padding:32px 14px;text-align:center;color:var(--txt-3);font-size:12.5px;}
.qtbl-error td{color:var(--red);}
/* Densidad — patrón de terminales pro (Bloomberg/fintech): compacta para escanear muchas filas,
   cómoda es la que ya declaramos arriba (default, sin clase), espaciosa para lectura relajada. */
.qtbl.compact thead th{padding:6px 12px;font-size:9px;}
.qtbl.compact tbody td{padding:6px 12px;font-size:11px;}
.qtbl.roomy thead th{padding:13px 16px;}
.qtbl.roomy tbody td{padding:13px 16px;font-size:12.5px;}