/* ═══════════════════════════════════════════════════════════════════════════ etrinok Design System — Design Tokens ═══════════════════════════════════════════════════════════════════════════ Single source of truth for color, spacing, typography, radii and shadows. Every token is a CSS custom property so both themes (dark/light) share one set of names — components never hardcode a color, they reference a token. Theme selection: - `:root` (and `[data-theme="dark"]`) → dark palette (default) - `[data-theme="light"]` → light palette - No stored preference → falls back to `prefers-color-scheme` The `theme_controller.js` Stimulus controller sets `data-theme` on and persists the choice to localStorage. See app/javascript/controllers/theme_controller.js Palette source: docs/REDESIGN_SPEC.md §2 (Anthropic's own swatches — clay, ivory, slate, olive, kraft, sky, heather, manilla, fig — read from anthropic.com's CSS). §3 sources the type scale and radii below. A few pre-redesign names (--accent-active, --*-border on positive/negative/warning/info, --neutral-subtle/-border, --scrollbar-*, --shadow-xl) fall outside the spec vocabulary and are kept as "legacy alias" tokens, derived from the new palette, because existing views/components.css still read them. The --*-text family on positive/negative/warning/info/neutral was the same kind of alias — retired in wave 7 once its last call site (5 Stimulus controllers) was migrated to the canonical --positive/--negative/--warning/--info/ --text-secondary classes. The Binance-brand accent alias family (5 names: base/-hover/-subtle/-border/-text) was the same kind of alias too — retired in wave 8 once its only call site (a nav-link modifier the wave 2 sidebar rewrite had already stopped emitting) was deleted from components.css. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Typography ──────────────────────────────────────────────────────── */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Type scale — spec §3. All sans (no serif for body copy in a trading tool); mono stays reserved for numbers that align in a column. */ --text-xs: 0.65625rem; /* 10.5px — micro-label, uppercase, 0.06em tracking */ --text-sm: 0.84375rem; /* 13.5px — collapses with --text-base, spec §3 */ --text-base: 0.84375rem; /* 13.5px — body */ --text-md: 0.9375rem; /* 15px */ --text-lg: 1.1875rem; /* 19px — KPI */ --text-xl: 1.4375rem; /* 23px — page title */ --text-2xl: 1.875rem; /* 30px — hero */ --text-3xl: 2.25rem; /* 36px */ --leading-tight: 1.2; --leading-snug: 1.375; --leading-normal: 1.5; /* ── Spacing scale (4px base) ────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ── Radii — spec §3 real Anthropic scale (4/8/16/999). Five names kept for call-site compatibility even though lg/xl/2xl now collapse to the same 16px card radius; pills use --radius-full, fields use --radius-md. */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 16px; --radius-2xl: 16px; --radius-full: 9999px; /* ── Motion ──────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; /* ── Z-index scale ───────────────────────────────────────────────────── */ --z-nav: 40; --z-dropdown: 50; --z-modal: 100; --z-toast: 110; } /* ═══════════════════════════════════════════════════════════════════════ DARK THEME (default) ═══════════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { color-scheme: dark; /* Surfaces — layered elevation from canvas → raised (spec §2) */ --surface-canvas: #141413; --surface-base: #201f1e; --surface-sunken: #0e0e0d; --surface-raised: #2b2a28; --surface-overlay: #3d3d3a; --surface-backdrop: rgba(8, 8, 7, 0.66); /* Borders — ink at low opacity, never a solid gray; cards read by surface contrast in dark, not by a strong border (spec §3) */ --border-subtle: rgba(250, 249, 245, 0.06); --border-default: rgba(250, 249, 245, 0.10); --border-strong: rgba(250, 249, 245, 0.20); --border-focus: #d97757; /* Text */ --text-primary: #faf9f5; /* 15,7:1 */ --text-secondary: #b0aea5; /* 7,3:1 */ --text-tertiary: #87867f; /* 4,5:1 */ --text-disabled: #5e5d59; --text-inverse: #141413; /* Accent — clay. One value, shared by both platforms (spec §4: the product identity doesn't repaint per workspace); the workspace switcher and topbar pill carry platform color separately via --platform-* below. */ --accent: #d97757; --accent-hover: #e89b7f; --accent-text: #d97757; /* 5,3:1 — clay passes for text in dark */ --accent-subtle: rgba(217, 119, 87, 0.18); --accent-border: rgba(217, 119, 87, 0.38); /* Status colors — positive/negative are NOT clay-adjacent on purpose (spec §2 decision 3: a loss must never read as an accent) */ --positive: #8ca46c; /* olive, lightened, 6,1:1 */ --positive-subtle: rgba(140, 164, 108, 0.16); --negative: #dd6b75; /* derived, 5,1:1 */ --negative-subtle: rgba(221, 107, 117, 0.16); --warning: #d4a27f; /* kraft, direct, 7,4:1 */ --warning-subtle: rgba(212, 162, 127, 0.16); --info: #6a9bcc; /* sky, direct, 5,7:1 */ --info-subtle: rgba(106, 155, 204, 0.16); /* Platform identity — tinted badge + dot for the workspace switcher and topbar pill (spec §4). Polymarket = heather, Binance = manilla. */ --platform-polymarket-bg: rgba(203, 202, 219, 0.16); --platform-polymarket-ink: #cbcadb; --platform-polymarket-dot: #cbcadb; --platform-binance-bg: rgba(235, 219, 188, 0.16); --platform-binance-ink: #ebdbbc; --platform-binance-dot: #ebdbbc; /* Chart base — grid/axis only; series colors live further down since they alias --accent/--text-* per spec §6's "no categorical palette" rule */ --chart-grid: rgba(250, 249, 245, 0.07); --chart-axis: #87867f; /* Primary button — ink↔ivory inversion, not clay (white-on-clay fails contrast for text); mirrors anthropic.com (spec §2 decision 2) */ --btn-primary-bg: #faf9f5; --btn-primary-ink: #141413; --brand-mark-ink: #faf9f5; /* tinta sobre relleno de acento (marca de Devise, burbuja del chat): clara en LOS DOS temas, porque el clay no cambia de claridad — spec §6-bis pt. 2 */ /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 44px rgba(0, 0, 0, 0.5); /* ── Legacy aliases — outside the spec vocabulary; derived from the palette above so nothing goes colorless while wave 2 migrates call sites to the canonical names (see file header). ────────────────────── */ --accent-active: #c6613f; /* legacy alias → pressed/active state, one step past --accent-hover */ --positive-border: rgba(140, 164, 108, 0.38); /* legacy alias → translucent border variant of --positive */ --negative-border: rgba(221, 107, 117, 0.38); /* legacy alias → translucent border variant of --negative */ --warning-border: rgba(212, 162, 127, 0.38); /* legacy alias → translucent border variant of --warning */ --info-border: rgba(106, 155, 204, 0.38); /* legacy alias → translucent border variant of --info */ --neutral-subtle: rgba(250, 249, 245, 0.08); /* legacy alias → ivory-tinted neutral fill */ --neutral-border: rgba(250, 249, 245, 0.18); /* legacy alias → ivory-tinted neutral border */ --shadow-xl: 0 4px 10px rgba(0, 0, 0, 0.45), 0 32px 72px rgba(0, 0, 0, 0.60); /* legacy alias → modal/popover shadow one step past --shadow-lg */ --scrollbar-thumb: rgba(250, 249, 245, 0.16); /* legacy alias → ivory-tinted scrollbar thumb */ --scrollbar-track: transparent; /* legacy alias → kept for API symmetry with --scrollbar-thumb */ /* ── Focus ring — always visible, always clay (spec §5) ───────────────── */ --shadow-focus-ring: 0 0 0 3px var(--accent-subtle), 0 0 0 1px var(--accent); /* ── Chart series — spec §6 bans categorical palettes. Line 1 is the only one in brand color; 2–4 ride the gray/border ramp so a second or third series reads as de-emphasized, never as a different category. ─────── */ --chart-line-1: var(--accent); --chart-line-2: var(--text-tertiary); --chart-line-3: var(--text-disabled); --chart-line-4: var(--border-strong); --chart-up: var(--positive); --chart-down: var(--negative); } /* ═══════════════════════════════════════════════════════════════════════ LIGHT THEME ═══════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { color-scheme: light; /* Surfaces — layered elevation from canvas → raised (spec §2) */ --surface-canvas: #f0eee6; --surface-base: #faf9f5; --surface-sunken: #e8e6dc; --surface-raised: #ffffff; --surface-overlay: #e8e6dc; /* ivory-dark — spec only names this surface for dark; here it's the hover/overlay tint (spec §2 swatch table) */ --surface-backdrop: rgba(20, 20, 19, 0.42); /* Borders — ink at low opacity, never a solid gray (spec §3) */ --border-subtle: rgba(20, 20, 19, 0.06); --border-default: rgba(20, 20, 19, 0.10); --border-strong: rgba(20, 20, 19, 0.20); --border-focus: #d97757; /* Text */ --text-primary: #141413; /* 17,7:1 */ --text-secondary: #5e5d59; /* 6,2:1 */ --text-tertiary: #6f6e69; /* 4,4:1 */ --text-disabled: #a39a89; --text-inverse: #faf9f5; /* Accent — clay. One value, shared by both platforms (spec §4: the product identity doesn't repaint per workspace); the workspace switcher and topbar pill carry platform color separately via --platform-* below. Clay itself fails as text color here (3,0:1) — --accent-text is the darkened one that passes (spec §2 decision 1). */ --accent: #d97757; /* fill only, NOT for text */ --accent-hover: #c6613f; --accent-text: #a94f30; /* 5,2:1 — this is the one that carries text */ --accent-subtle: rgba(217, 119, 87, 0.14); --accent-border: rgba(217, 119, 87, 0.32); /* Status colors — positive/negative are NOT clay-adjacent on purpose (spec §2 decision 3: a loss must never read as an accent) */ --positive: #5e7548; /* olive, darkened, 4,9:1 */ --positive-subtle: rgba(94, 117, 72, 0.12); --negative: #b03a46; /* derived, 5,7:1 */ --negative-subtle: rgba(176, 58, 70, 0.10); --warning: #8d6035; /* kraft, darkened, 5,2:1 */ --warning-subtle: rgba(212, 162, 127, 0.24); --info: #3d6f9e; /* sky, darkened, 5,0:1 */ --info-subtle: rgba(106, 155, 204, 0.16); /* Platform identity — tinted badge + dot for the workspace switcher and topbar pill (spec §4). Polymarket = heather, Binance = manilla. */ --platform-polymarket-bg: #cbcadb; --platform-polymarket-ink: #141413; --platform-polymarket-dot: #7b79ad; --platform-binance-bg: #ebdbbc; --platform-binance-ink: #141413; --platform-binance-dot: #b08b4f; /* Chart base — grid/axis only; series colors live further down since they alias --accent/--text-* per spec §6's "no categorical palette" rule */ --chart-grid: rgba(20, 20, 19, 0.08); --chart-axis: #6f6e69; /* Primary button — ink↔ivory inversion, not clay (clay-on-white would be 3,1:1 and fails); mirrors anthropic.com (spec §2 decision 2) */ --btn-primary-bg: #141413; --btn-primary-ink: #faf9f5; --brand-mark-ink: #faf9f5; /* tinta sobre relleno de acento (marca de Devise, burbuja del chat): clara en LOS DOS temas, porque el clay no cambia de claridad — spec §6-bis pt. 2 */ /* Shadows */ --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.05); --shadow-md: 0 1px 2px rgba(20, 20, 19, 0.04), 0 6px 16px rgba(20, 20, 19, 0.06); --shadow-lg: 0 2px 4px rgba(20, 20, 19, 0.05), 0 18px 40px rgba(20, 20, 19, 0.12); /* ── Legacy aliases — outside the spec vocabulary; derived from the palette above so nothing goes colorless while wave 2 migrates call sites to the canonical names (see file header). ────────────────────── */ --accent-active: #a94f30; /* legacy alias → pressed/active state, one step past --accent-hover */ --positive-border: rgba(94, 117, 72, 0.32); /* legacy alias → translucent border variant of --positive */ --negative-border: rgba(176, 58, 70, 0.30); /* legacy alias → translucent border variant of --negative */ --warning-border: rgba(212, 162, 127, 0.44); /* legacy alias → translucent border variant of --warning */ --info-border: rgba(106, 155, 204, 0.34); /* legacy alias → translucent border variant of --info */ --neutral-subtle: rgba(20, 20, 19, 0.06); /* legacy alias → ink-tinted neutral fill */ --neutral-border: rgba(20, 20, 19, 0.16); /* legacy alias → ink-tinted neutral border */ --shadow-xl: 0 4px 8px rgba(20, 20, 19, 0.06), 0 28px 64px rgba(20, 20, 19, 0.18); /* legacy alias → modal/popover shadow one step past --shadow-lg */ --scrollbar-thumb: rgba(20, 20, 19, 0.18); /* legacy alias → ink-tinted scrollbar thumb */ --scrollbar-track: transparent; /* legacy alias → kept for API symmetry with --scrollbar-thumb */ /* ── Focus ring — always visible, always clay (spec §5) ───────────────── */ --shadow-focus-ring: 0 0 0 3px var(--accent-subtle), 0 0 0 1px var(--accent); /* ── Chart series — spec §6 bans categorical palettes. Line 1 is the only one in brand color; 2–4 ride the gray/border ramp so a second or third series reads as de-emphasized, never as a different category. ─────── */ --chart-line-1: var(--accent); --chart-line-2: var(--text-tertiary); --chart-line-3: var(--text-disabled); --chart-line-4: var(--border-strong); --chart-up: var(--positive); --chart-down: var(--negative); } /* ── System-preference fallback for first paint before JS runs ────────── theme_controller sets data-theme as early as possible (inline in ) to avoid flash-of-wrong-theme; this block is a safety net only. ────── */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } } /* ═══════════════════════════════════════════════════════════════════════════ etrinok Design System — Base / Reset layer Global element defaults built on top of tokens.css. Themeable, minimal. ═══════════════════════════════════════════════════════════════════════════ */ * { border-color: var(--border-default); } html { color-scheme: light dark; } body { background: var(--surface-canvas); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); /* Cifras sueltas en el cuerpo: proporcionales por defecto (spec §3). Las columnas que necesitan alinear dígitos piden .num-tabular o .tabular explícitamente. */ font-variant-numeric: proportional-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--duration-base) var(--ease-out); } /* Disable transitions during the instant a theme is switched to avoid a laggy "wipe" effect across every element — theme_controller toggles this class off again on the next frame. */ .theme-switching, .theme-switching * { transition: none !important; } ::selection { background: var(--accent-subtle); color: var(--text-primary); } a { color: inherit; } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } *::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* ── Escala tipográfica (spec §3) ───────────────────────────────────────── Utilidades nuevas: todavía no las consume nadie, pero las vistas de la ola 2 y los partials de shared/ las van a usar en vez de tamaños sueltos. */ .type-hero { font-size: var(--text-2xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: proportional-nums; } .type-page-title { font-size: var(--text-xl); font-weight: 700; line-height: var(--leading-tight); } .type-kpi { font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); font-variant-numeric: proportional-nums; } .type-card-heading { font-size: var(--text-sm); font-weight: 650; line-height: var(--leading-snug); color: var(--text-primary); } .type-body { font-size: var(--text-base); font-weight: 400; line-height: var(--leading-normal); } /* Micro-etiqueta del spec §3: 10,5px / weight 700 / letter-spacing 0.06em / uppercase (19 vistas). NO confundir con `.text-micro` (components.css, ~línea 861), que solo fija font-size (0.65rem) y no es la clase del spec. */ .type-micro { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); } /* ── Color de texto por token ────────────────────────────────────────────── Las tres jerarquías de texto del spec §2 como utilidades. Tailwind NO genera estas clases (no son colores de su theme), así que no hay colisión; y como este archivo va sin @layer, ganan por cascada a cualquier `text-gray-N` que quede en una vista a medio migrar. La ola 2 reemplaza `text-gray-400/500/600/700` por estas (ver docs/DESIGN_TOKEN_MIGRATION.md §2, fila 7). */ .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-disabled { color: var(--text-disabled); } /* Acento y estado — mismo criterio de cascada que las cuatro de arriba. Reemplazan los `style="color:var(--accent-text)"` etc. inline (conteo por clase en docs/DESIGN_TOKEN_MIGRATION.md §8); ninguna vista de esta ola las consume todavía, quedan definidas para que la ola 5 tenga a dónde migrar. */ .text-accent { color: var(--accent-text); } .text-positive { color: var(--positive); } .text-negative { color: var(--negative); } .text-warning { color: var(--warning); } .text-info { color: var(--info); } .text-inverse { color: var(--text-inverse); } /* Monospace utility for tabular/financial figures */ .font-mono, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Tabulares en sans (columnas de tabla que no necesitan monoespaciada) y proporcionales explícitas — el complemento de .tabular / .font-mono. */ .num-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .num-proportional { font-variant-numeric: proportional-nums; } /* Focus ring — consistent everywhere, replaces Tailwind's default outline. Siempre visible, con clay (spec §5): nunca outline:none sin reemplazo. input/select/textarea/button/a heredan esta regla en vez de anularla. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); } /* Placeholder consistency */ ::placeholder { color: var(--text-tertiary); opacity: 1; } /* Native scrollbar-adjacent form controls should inherit theme */ select { color-scheme: inherit; } /* prefers-reduced-motion (spec §5) — única regla del design system; no la dupliques en components.css. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* El atributo `hidden` le gana a cualquier `display` de autor. * * El navegador trae `[hidden] { display: none }` en su hoja de usuario, y * CUALQUIER regla de autor le gana — así que `hidden` no oculta un `.btn` * (display: inline-flex), un `.row-detail` (display: table-row) ni un * `.ws-menu`. El proyecto ya se tropezó tres veces con esto y lo resolvió tres * veces a mano, una por componente: * * .ws-menu.hidden { display: none; } (nav.css) * .row-detail[hidden] { display: none; } (components.css) * .alert--stacked.hidden { display: none; } * * y la cuarta se escapó: el botón "cargar más" seguía visible después de la * última tanda porque `.btn` le ganaba. Una regla, y deja de pasar. * * `!important` a propósito: la gracia es justamente que nada la pise. */ [hidden] { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ etrinok Design System — Components Reusable, theme-aware building blocks. Class names are semantic (`.badge`, `.card`, `.btn`) — never a color utility. Swap `data-theme` on and every one of these repaints correctly with no per-view changes. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Card ──────────────────────────────────────────────────────────────── Drop-in replacement for the old ad-hoc `.card { background: var(--trading-card) }`. Same class name so existing views need zero markup changes. */ .card { background: var(--surface-base); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .card--interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .card--accent { border-color: var(--accent-border); background: linear-gradient(180deg, var(--accent-subtle) 0%, var(--surface-base) 140%); } /* Hermana de .card--accent para el registro de "atención": la usa el bloque de órdenes límite pendientes, que tenía los dos colores inline. */ .card--warning { border-color: var(--warning-border); background: linear-gradient(180deg, var(--warning-subtle) 0%, var(--surface-base) 140%); } .card--sunken { background: var(--surface-sunken); border-color: var(--border-subtle); box-shadow: inset 0 1px 0 var(--border-subtle); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); } .card-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } .card-subtitle { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; } /* Esta clase es DUEÑA de su margen inferior (`margin-bottom` abajo). Un `mb-*` de Tailwind escrito al lado en el mismo `class="…"` queda MUERTO por la trampa de capas de siempre (spec §6-bis): Tailwind v4 emite sus utilidades dentro de `@layer utilities` y esta hoja va sin capa, así que le gana siempre, con cualquier especificidad. No le agregues `mb-*` — no hace nada, y el guard de `spec/views/design_system_lint_spec.rb` lo frena. (`mt-*` sí funciona: esta clase no toca `margin-top`.) */ .card-eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: var(--space-1); } /* ── KPI card (número hero + contexto — spec §3/§5) ────────────────────── Reemplaza los stats sueltos sin unidad ni período. El sublabel es donde va el «(últimos 7 días)» que hoy falta en los dashboards. */ .kpi-card { background: var(--surface-base); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); } .kpi-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); } .kpi-value { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: proportional-nums; } .kpi-sublabel { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; } /* ── Buttons ───────────────────────────────────────────────────────────── `.btn` + one modifier. Sizing via `.btn--sm` / default / `.btn--lg`. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap; padding: 0.5rem 0.9rem; border-radius: var(--radius-full); border: 1px solid transparent; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); text-decoration: none; } .btn:active { transform: scale(0.98); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; } .btn--sm { font-size: var(--text-xs); padding: 0.3rem 0.65rem; border-radius: var(--radius-full); } .btn--lg { font-size: var(--text-md); padding: 0.7rem 1.3rem; border-radius: var(--radius-full); } /* Rails envuelve cada `button_to` en un
, y ese form es un bloque. En una fila flex el ítem que se alinea es el FORM, no el .btn de adentro: al lado de un los botones de formulario quedaban corridos, con su propia caja y su propia altura. Con inline-flex el form se ajusta al botón y los dos se alinean como si fueran lo mismo. Va global y no en una vista porque hay 29 `button_to` en la app y ninguno tenía regla: donde se mezclan con enlaces, todos estaban igual de corridos. */ .button_to { display: inline-flex; } /* Botón de un solo glifo. Con el padding lateral del botón de texto la caja queda más ancha que alta y el ícono se ve corrido: glifos como ✕, ⎘ o ▶ tienen la caja de tinta desplazada respecto de la caja em, así que el centrado no sale de acertarle al padding sino de una caja cuadrada donde el `align-items/justify-content: center` de .btn hace el trabajo. El alto se hereda del tamaño que toque (.btn--sm, default o .btn--lg): así queda igual que el del botón de texto de al lado, sin número mágico. El ancho es un piso explícito. Acá hubo un intento con `aspect-ratio: 1` en vez del piso, y NO funciona: aspect-ratio necesita que una de las dos medidas sea definida para sacar la otra, y en un botón así las dos son automáticas (el alto lo da el padding, el ancho el glifo). El resultado medido fue 11.6 × 22.1 px — el ancho del glifo pelado, o sea botones finitos. Esta regla reemplaza además una anterior (`padding: 0.5rem` + radio) que no tenía ni un uso en las vistas. */ .btn--icon { padding-left: 0; padding-right: 0; min-width: 2.5rem; flex: none; border-radius: var(--radius-full); } .btn--sm.btn--icon { min-width: 1.75rem; } .btn--full { width: 100%; } /* Primary — main action (Sync, Save, Start Simulation). Inversión tinta↔marfil, NO clay (spec §2, decisión 2 — blanco sobre clay no pasa contraste). Mismo tratamiento en :hover y :active. */ .btn--primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-ink); } .btn--primary:hover, .btn--primary:active { background: color-mix(in srgb, var(--btn-primary-bg) 88%, var(--surface-canvas)); border-color: color-mix(in srgb, var(--btn-primary-bg) 88%, var(--surface-canvas)); } /* Secondary — neutral, low emphasis (Edit, Cancel, View) */ .btn--secondary { background: var(--surface-overlay); border-color: var(--border-default); color: var(--text-secondary); } .btn--secondary:hover { border-color: var(--border-strong); color: var(--text-primary); } /* Ghost — no border/fill until hover (nav items, tertiary links) */ .btn--ghost { background: transparent; color: var(--text-secondary); } .btn--ghost:hover { background: var(--surface-overlay); color: var(--text-primary); } /* Positive / success — Start bot, confirm profitable action */ .btn--positive { background: var(--positive); border-color: var(--positive); color: var(--text-inverse); } .btn--positive:hover { filter: brightness(1.08); } /* Danger — Stop, Delete */ .btn--danger { background: var(--negative-subtle); border-color: var(--negative-border); color: var(--negative); } .btn--danger:hover { background: var(--negative); border-color: var(--negative); color: var(--text-inverse); } .btn--danger-solid { background: var(--negative); border-color: var(--negative); color: var(--text-inverse); } .btn--danger-solid:hover { filter: brightness(1.1); } /* Warning — Pause, Reset */ .btn--warning { background: var(--warning-subtle); border-color: var(--warning-border); color: var(--warning); } .btn--warning:hover { background: var(--warning); border-color: var(--warning); color: var(--text-inverse); } /* Outline accent variant — used for the Binance amber CTAs etc. */ .btn--accent-outline { background: var(--accent-subtle); border-color: var(--accent-border); color: var(--accent-text); } .btn--accent-outline:hover { background: var(--accent-subtle); border-color: var(--accent); } /* Binance-brand solid button — spec §6-bis decisión 5: los tokens --platform-* son para pastillas y para el selector de workspace, no para botones. El mismo --platform-binance-bg da un botón sólido en tema claro y un tinte al 16% (fantasma) en oscuro, porque ahí es donde vive el token — no en un fondo de botón. .btn--binance ahora se comporta exactamente como .btn--primary (inversión tinta↔marfil vía --btn-primary-bg/-ink); la identidad de plataforma sigue viviendo en .platform-tag y en el selector de workspace. El selector se mantiene sin borrar: hay call sites fuera de esta ola que lo usan. */ .btn--binance { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-ink); } .btn--binance:hover, .btn--binance:active { background: color-mix(in srgb, var(--btn-primary-bg) 88%, var(--surface-canvas)); border-color: color-mix(in srgb, var(--btn-primary-bg) 88%, var(--surface-canvas)); } /* ── Badges / Status pills ────────────────────────────────────────────── `.badge` + semantic modifier. Used for bot status, mode (SIM/LIVE), backtest status, public/private, win/loss, etc. */ .badge { display: inline-flex; align-items: center; gap: 0.3em; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; padding: 0.15rem 0.55rem; border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap; } .badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .badge--pulse::before { animation: badge-pulse 1.6s ease-in-out infinite; } @keyframes badge-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } } .badge--neutral { background: var(--neutral-subtle); border-color: var(--neutral-border); color: var(--text-secondary); } .badge--positive { background: var(--positive-subtle); border-color: var(--positive-border); color: var(--positive); } .badge--negative { background: var(--negative-subtle); border-color: var(--negative-border); color: var(--negative); } .badge--warning { background: var(--warning-subtle); border-color: var(--warning-border); color: var(--warning); } .badge--info { background: var(--info-subtle); border-color: var(--info-border); color: var(--info); } .badge--accent { background: var(--accent-subtle); border-color: var(--accent-border); color: var(--accent-text); } /* Solid (filled) variants — higher emphasis, e.g. unread counters */ .badge--solid-positive { background: var(--positive); border-color: var(--positive); color: var(--text-inverse); } .badge--solid-negative { background: var(--negative); border-color: var(--negative); color: var(--text-inverse); } .badge--solid-warning { background: var(--warning); border-color: var(--warning); color: var(--text-inverse); } .badge--solid-accent { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); } /* Bot-session status → badge modifier map (mirrors BotSession#status_badge_class) */ .badge--status-running { background: var(--positive-subtle); border-color: var(--positive-border); color: var(--positive); } .badge--status-paused { background: var(--warning-subtle); border-color: var(--warning-border); color: var(--warning); } .badge--status-stopped { background: var(--neutral-subtle); border-color: var(--neutral-border); color: var(--text-secondary); } .badge--status-error { background: var(--negative-subtle); border-color: var(--negative-border); color: var(--negative); } .badge--status-idle { background: var(--neutral-subtle); border-color: var(--neutral-border); color: var(--text-secondary); } /* ── Status (punto + palabra, nunca solo color — spec §5) ─────────────────── Para estado de bots/sesiones/backtests donde el color solo no alcanza (daltonismo, pantallas apagadas). El texto adentro es la etiqueta: Corriendo */ .status { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--text-xs); font-weight: 700; } .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .status--running { color: var(--positive); } .status--paused { color: var(--warning); } .status--stopped, .status--idle { color: var(--text-secondary); } .status--error { color: var(--negative); } /* Reutiliza la animación que ya define .badge--pulse más arriba */ .status--live::before { animation: badge-pulse 1.6s ease-in-out infinite; } /* ── Platform tag (fondo tintado + punto + nombre — spec §5) ──────────────── Identifica de qué plataforma es una fila/tarjeta cuando conviven varias, ej. la vista combinada de Posiciones/Historial. */ .platform-tag { display: inline-flex; align-items: center; gap: 0.4em; border-radius: var(--radius-full); padding: 0.15rem 0.6rem; font-size: var(--text-xs); font-weight: 700; } .platform-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .platform-tag--polymarket { background: var(--platform-polymarket-bg); color: var(--platform-polymarket-ink); } .platform-tag--polymarket::before { background: var(--platform-polymarket-dot); } .platform-tag--binance { background: var(--platform-binance-bg); color: var(--platform-binance-ink); } .platform-tag--binance::before { background: var(--platform-binance-dot); } /* ── PnL text helpers ──────────────────────────────────────────────────── Replaces raw `text-green-400`/`text-red-400` sprinkled through models and views. Sign-aware color only — no background. */ .pnl-positive { color: var(--positive); } .pnl-negative { color: var(--negative); } .pnl-neutral { color: var(--text-tertiary); } /* Middle-of-the-road rating state (e.g. Sharpe 0.5–1.5, profit factor 1–1.5) — not bad enough for negative, not strong enough for positive. */ .text-sharpe-ok { color: var(--warning); } /* ── Tables ────────────────────────────────────────────────────────────── Dense financial tables: tabular numerals, sticky header option, subtle row dividers, right-aligned numeric columns by convention (`.num`). */ /* Contenedor de scroll horizontal — el body de la página nunca scrollea de costado (spec §5). La ola 2 envuelve cada con esto. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .table-scroll > .table { min-width: max-content; } /* Tablas de texto corrido (documentación, descripciones largas): el min-width:max-content de arriba las estiraría hasta que la prosa entre en una sola línea. Con este modificador el texto envuelve dentro del ancho disponible y el contenedor solo scrollea si de verdad no entra. */ .table-scroll > .table--wrap { min-width: 0; } /* ── Columnas que se esconden según el ancho ───────────────────────────────── * * Antes esto era una columna de acciones `sticky` a la derecha. Resolvía llegar * al botón, pero se veía mal: una celda sticky necesita fondo opaco propio, y * ese fondo no coincide con el de la fila, así que el botón quedaba en una * banda vertical que se leía como un panel flotante y no como parte de la fila. * * Esto es mejor: con catorce columnas de datos financieros no hay ancho que * alcance, así que en pantallas chicas se muestran menos. No se pierde nada — * todo lo que se esconde está en el panel que se abre al hacer click en la * fila, que es justamente para lo que se creó. * * Los cortes salen de medir la tabla de posiciones: 1662 px con las catorce. */ @media (max-width: 1600px) { .table .col-op-3 { display: none; } } @media (max-width: 1300px) { .table .col-op-2 { display: none; } } @media (max-width: 1000px) { .table .col-op-1 { display: none; } } /* En un teléfono ni cuatro columnas de datos financieros entran (medido: 711 px de tabla contra 325 disponibles), así que la tabla va a scrollear igual. Lo que NO puede pasar es que el botón de cerrar quede inalcanzable: acá se esconde de la fila y aparece dentro del panel, que a este ancho es la vista que de verdad se lee. */ @media (max-width: 768px) { .table .col-op-0 { display: none; } } .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table th { text-align: left; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); padding: var(--space-3); border-bottom: 1px solid var(--border-default); white-space: nowrap; } .table th.num, .table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; /* Una cifra nunca parte en dos líneas. Importa sobre todo en las tablas con `.table--wrap`, donde las columnas se reparten el ancho del contenedor: sin esto un "+123.45%" podía quedar cortado al medio. */ white-space: nowrap; } /* `.table th` fija text-align sin @layer, así que le gana a `.text-center` de Tailwind (que vive en @layer utilities) — hace falta este modificador explícito para centrar (spec §6-bis). */ .table th.center, .table td.center { text-align: center; } /* El `color` por defecto de la celda va con :where() a propósito. `.table td` pesa (0,1,1) y las clases canónicas de color de base.css (.text-negative, .text-positive, .text-warning…) pesan (0,1,0): sin bajarle la especificidad, `.table td` le gana a todas y CUALQUIER celda coloreada queda aplanada a --text-secondary. Con :where() la regla pesa (0,0,1) y la clase de la celda manda. (Ojo: esto no rescata a las utilidades de color de Tailwind — viven en @layer utilities y cualquier regla sin capa les gana, sin importar la especificidad. Para colorear una celda hay que usar la clase canónica.) */ :where(.table) td { color: var(--text-secondary); } .table td { padding: var(--space-3); border-bottom: 1px solid var(--border-subtle); } .table tbody tr { transition: background-color var(--duration-fast) var(--ease-out); } .table tbody tr:hover { background: var(--surface-overlay); } .table tbody tr:last-child td { border-bottom: none; } .table--sortable th a { color: inherit; display: inline-flex; align-items: center; gap: 2px; text-decoration: none; } .table--sortable th a:hover { color: var(--text-primary); } .table--sortable th.is-active a { color: var(--accent-text); } /* ── Forms ─────────────────────────────────────────────────────────────── `.field`, `.field-label`, `.input`/`.select`/`.textarea`. */ .field { margin-bottom: var(--space-4); } /* Misma trampa que `.card-eyebrow` más arriba: esta clase ya es dueña de su `margin-bottom` (abajo), así que un `mb-*` al lado queda muerto (spec §6-bis). No lo agregues — el guard de `spec/views/design_system_lint_spec.rb` lo vigila. `mt-*` sí funciona. Ojo: `.field` (arriba) y `.field-hint` (abajo) también fijan margen, pero cada una de un lado distinto — `.field` el de abajo, `.field-hint` el de arriba. La regla real es: la utilidad muere solo si la clase fija ESA MISMA propiedad. */ .field-label { display: block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: var(--space-2); } /* Renglón de etiqueta que puede llevar un badge al lado ("Instrumento ⚡PERP"). Reserva la altura del badge SIEMPRE, tenga badge o no. Sin esto, dos campos lado a lado —uno con badge y otro sin— arrancan sus controles a alturas distintas: el badge es más alto que el texto de la etiqueta y empuja el control hacia abajo. Medido en backtests/new: el renglón con badge medía 19px, el de al lado 14px, y los dos desplegables quedaban 5px corridos uno respecto del otro. Es dueña de su propio `margin-bottom`, así que un `mb-*` al lado queda muerto — misma trampa que `.field` y `.card-eyebrow` (spec §6-bis). Y la etiqueta que va adentro no debe traer el suyo. */ .field-label-row { display: flex; align-items: center; gap: var(--space-2); min-height: 1.1875rem; /* alto de un .badge--xs: 10px de texto + 0.1rem×2 */ margin-bottom: var(--space-2); } .field-label-row > .field-label { margin-bottom: 0; } .field-hint { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); } .field-error { font-size: var(--text-xs); color: var(--negative); margin-top: var(--space-1); } .input, .select, .textarea { width: 100%; background: var(--surface-sunken); border: 1px solid var(--border-default); color: var(--text-primary); border-radius: var(--radius-md); padding: 0.55rem 0.8rem; font-size: var(--text-sm); font-family: var(--font-sans); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus-ring); } .input::placeholder, .textarea::placeholder { color: var(--text-tertiary); } .input:disabled, .select:disabled, .textarea:disabled { opacity: 0.55; cursor: not-allowed; } .textarea { resize: vertical; min-height: 5rem; } /* `class="input font-mono"` estaba MUERTO y nadie lo notaba: `.font-mono` vive en base.css y `.input/.select/.textarea` fijan `font-family: var(--font-sans)` en components.css. Misma especificidad (0,1,0) y las dos sin capa → gana la hoja que carga después, o sea components.css. Con ~20 call sites (los campos numéricos de las estrategias de Binance, el prompt de sistema del LLM, la URL de Ollama, el JSON de app_settings) todos se venían renderizando en sans. Esta regla (0,2,0) los devuelve a monoespaciada. */ /* Un campo obligatorio que todavía está vacío: avisa, no es un error todavía. Estaba inline en el buscador de instrumentos. */ .input--required-empty { border-color: var(--warning-border); } /* Un justo debajo de la fila de datos. Nació en Posiciones para sacar Apalancamiento y Liquidación de la tabla —vacías la mayoría de las veces: leverage no existe en Polymarket ni en spot, liquidación solo aplica a futuros apalancados— sin dejar de mostrarlas. Ver row_detail_controller.js. */ .row-toggle { display: inline-flex; align-items: center; background: transparent; border: 0; padding: 0; color: var(--text-tertiary); cursor: pointer; } .row-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .row-toggle span { display: inline-block; transition: transform var(--duration-fast); } .row-toggle[aria-expanded="true"] span { transform: rotate(90deg); } /* Padding propio: `.table td` deja var(--space-3) en los cuatro lados, que en una fila de datos está bien pero deja al panel pegado a la fila de arriba y a la de abajo — abierto se lee como si fuera otra fila más, no como un bloque aparte. */ .row-detail > td { background: var(--surface-sunken); padding: var(--space-4) var(--space-4) var(--space-5); } /* Tabla ADENTRO de un panel de detalle: la de las corridas de una estrategia. El padding normal de `.table td` es el correcto para una tabla que es la pantalla; acá compite por espacio con la curva y los números de al lado, y seis filas con ese aire empujan el panel a media pantalla de alto. */ .table--compact th, .table--compact td { padding: var(--space-1) var(--space-2); } .table--compact { background: transparent; } /* Explícito a propósito, aunque hoy ninguna otra regla le fija `display` a este (el `[hidden]` del user-agent stylesheet ya le gana por su cuenta a `tr { display: table-row }`, también del UA — mismo origen, más especificidad). El motivo es no repetir la trampa de `.ws-menu` (spec §6-bis): CUALQUIER regla de autor que en el futuro le toque `display` a `.row-detail` —tenga o no @layer— le gana al stylesheet del navegador sin importar especificidad, y `[hidden]` dejaría de andar en silencio. Fijarlo acá hace que ese día la regla ya exista. */ .row-detail[hidden] { display: none; } /* Cada par etiqueta/valor es UN item de la grilla, no dos. Con
y
sueltos como hijos directos la grilla los reparte por separado y a anchos reales los pares se parten: la etiqueta queda al final de una fila y su valor arranca la siguiente, así que el panel se lee como una lista de palabras sin dueño. Verificado con el panel abierto en /positions antes de corregirlo. HTML5 permite envolver cada grupo dt+dd en un
dentro de un
justamente para esto. */ .row-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-4) var(--space-6); } .row-detail-item dt { margin-bottom: 0.15rem; color: var(--text-tertiary); } .row-detail-item dd { margin: 0; } /* El texto no llega gris por un selector que le gane a este — `:where(.table) td` (ola 5) ya baja su propia especificidad a (0,0,1) a propósito para no aplastar una celda coloreada — sino por HERENCIA: el
que ya trae su color) y solo define qué pasa en :hover. */ .link-hover-accent { transition: color var(--duration-base) var(--ease-out); } .link-hover-accent:hover { color: var(--accent-text); } /* Variante para hover del ANCESTRO (`.group` de Tailwind), no del propio elemento — ej. una etiqueta que cambia de color cuando se pasa el mouse por todo el `
de este panel sí matchea esa regla y queda en --text-secondary, y
/
/
heredan ese color si nadie lo pisa. Sin esta línea el panel se lee apagado en los dos temas (es la misma familia de bug que ya mordió tres veces a `.table`, ver el comentario de `:where(.table) td` más arriba). */ .row-detail-grid dd { color: var(--text-primary); } /* ── Hover de borde y fondo (ola 12) ──────────────────────────────────────── Misma trampa que mató a `.link-*` en la ola 9, pero en borde y fondo en vez de texto: `hover:border-[var(--info)]`, `hover:border-[var(--warning)]` y `hover:bg-[var(--surface-overlay)]` escritos encima de una clase del design system (`.card`…) NUNCA cambiaron nada. Tailwind v4 emite sus utilidades —incluidas las de `:hover`— dentro de `@layer utilities`; este archivo, como base.css, va sin capa, y en CSS lo sin-capa le gana siempre a lo con-capa, con cualquier especificidad. Dos de los nueve hovers muertos estaban además tapados por un `style="border-color:…"` inline en el mismo elemento: un estilo inline le gana a toda regla CSS, con capa o sin capa, así que esos dos no tuvieron ninguna chance ni antes del bug de capas. La solución es la misma que la de `.link-*`: una clase del design system con su propio `:hover`, sin `!important`, y el `style` inline afuera. `.mode-option[data-mode=…].is-selected` tiene especificidad (0,3,0), igual que su `:hover` con el mismo atributo — por eso las reglas `.is-selected` van DESPUÉS acá abajo: a especificidad empatada gana la que está más abajo en el archivo, y así el estado seleccionado le gana al hover a propósito. El color de modo no se pierde al pasar el mouse por encima de la tarjeta ya elegida. */ /* Tarjetas de modo del formulario de sesión de Polymarket */ .mode-card { border-width: 2px; } .mode-card--info { border-color: var(--info-border); } .mode-card--info:hover { border-color: var(--info); } .mode-card--warning { border-color: var(--warning-border); } .mode-card--warning:hover { border-color: var(--warning); } /* Filas de modo del formulario de sesión de Binance (las usa OTRO implementador esta misma ola, en app/views/binance/bot_sessions/new.html.erb) */ .mode-option { border-color: var(--border-default); transition: border-color var(--duration-base) var(--ease-out); } .mode-option:hover { border-color: var(--border-strong); } .mode-option[data-mode="demo"]:hover { border-color: var(--warning-border); } .mode-option[data-mode="live"]:hover { border-color: var(--negative-border); } .mode-option[data-mode="simulation"].is-selected { border-color: var(--info); } .mode-option[data-mode="demo"].is-selected { border-color: var(--warning); } .mode-option[data-mode="live"].is-selected { border-color: var(--negative); } /* Burbujas del chat con el asistente (chat_widget_controller.js las arma desde JS). El widget tenía su propio juego de colores fijos a tema oscuro y por eso se quedó con el diseño viejo cuando el resto de la app cambió: al vivir en un template de JavaScript, ninguna auditoría de vistas lo veía. */ .chat-bubble { border-radius: var(--radius-xl); padding: 0.5rem 0.75rem; line-height: 1.6; max-width: 88%; } .chat-bubble--user { background: var(--accent); color: var(--brand-mark-ink); } .chat-bubble--assistant { background: var(--surface-sunken); color: var(--text-primary); } .chat-bubble--error { background: var(--negative-subtle); border: 1px solid var(--negative-border); color: var(--negative); } /* Estado "pensando" y traza de herramientas: mismo cuerpo, tinta atenuada. */ .chat-bubble--thinking { background: var(--surface-sunken); color: var(--text-tertiary); } .chat-dot { width: 0.375rem; height: 0.375rem; border-radius: var(--radius-full); background: currentColor; display: inline-block; } /* Radio presentado como tarjeta elegible (elegir tipo de reporte: error o sugerencia). Se distingue de .mode-option en que acá NO hay JS: el estado sale del :checked del propio , que es hermano anterior del
que se pinta. Por eso tampoco sirven las utilidades peer-checked/* de Tailwind — viven en @layer utilities y cualquier regla sin capa les gana, que es la trampa que ya mordió cuatro veces. */ .choice-card { border: 1px solid var(--border-default); border-radius: var(--radius-lg); transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); } .choice-card:hover { border-color: var(--border-strong); } input:checked + .choice-card--negative { border-color: var(--negative); background: var(--negative-subtle); color: var(--negative); } input:checked + .choice-card--info { border-color: var(--info); background: var(--info-subtle); color: var(--info); } /* El foco del teclado tiene que verse: el está visualmente oculto, así que el anillo lo lleva la tarjeta. Sin esto, navegar con Tab por el formulario es a ciegas. */ input:focus-visible + .choice-card { outline: 2px solid var(--accent); outline-offset: 2px; } /* de un
con cabecera tintada (mcp_docs/index) */ .details-summary { background: var(--surface-overlay); transition: background var(--duration-base) var(--ease-out); } .details-summary:hover { background: var(--surface-raised); } /* ── Tarjeta plegable de consulta ────────────────────────────────────────── Para el bloque LARGO que se consulta y no se opera: el prompt completo de un slot son cientos de líneas y, desplegado de entrada, empujaba fuera de la pantalla lo único que la gente viene a hacer en /prompts (crear y elegir variantes). `
` nativo, como el menú de acciones de estrategias: se abre sin una línea de JavaScript —así que no depende del bundle ni pelea con la CSP estricta— y el navegador ya le da teclado, foco y búsqueda dentro de la página. El triangulito por defecto del navegador no se puede estilar en todos ellos, así que se apaga (`list-style` + el pseudo-elemento de WebKit) y el chevrón lo pone `::after`, que sí gira. El estado se dice DOS veces a propósito: el chevrón (color, para quien mira) y el "Ver"/"Ocultar" que la vista alterna con `group-open:` (palabra, para quien no interpreta un triángulo). */ .disclosure-card > summary { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; user-select: none; list-style: none; } .disclosure-card > summary::-webkit-details-marker { display: none; } .disclosure-card > summary::after { content: "▾"; display: inline-block; color: var(--text-tertiary); transition: transform var(--duration-base) var(--ease-out); } .disclosure-card[open] > summary::after { transform: rotate(180deg); } /* El foco del teclado va en el , que es el elemento que se activa: sin esto, tabular hasta el plegable es a ciegas. */ .disclosure-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-lg); } @media (prefers-reduced-motion: reduce) { .disclosure-card > summary::after { transition: none; } } /* Techo para un cuerpo largo: ~26rem son unas 40 líneas de mono a text-xs, de sobra para entender de qué va el texto. Sin tope, un prompt de 500 líneas vuelve inútil la barra de scroll de la página entera. */ .longform-scroll { max-height: 26rem; overflow-y: auto; } /* ── Tooltip propio ──────────────────────────────────────────────────────── Reemplaza al `title` del navegador donde el dato se consulta al vuelo: en las barras de los gráficos del tablero y en el contador de sesiones. El nativo tarda casi un segundo en aparecer, no se puede estilar y no admite más de una línea con formato. `position: fixed` y colgado del (lo hace tooltip_controller.js): si se posicionara relativo al disparador, cualquier ancestro con `overflow` lo recortaría, y estos viven adentro de tarjetas y de contenedores con overflow-x: auto. `pointer-events: none` para que el globo no se meta entre el cursor y la barra: si lo hiciera, aparecer taparía el disparador, dispararía el mouseout y el globo parpadearía sin parar. */ .tooltip-bubble { position: fixed; z-index: var(--z-toast); pointer-events: none; max-width: 20rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-overlay); color: var(--text-secondary); box-shadow: var(--shadow-lg); font-size: var(--text-xs); line-height: 1.45; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); } .tooltip-bubble.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { .tooltip-bubble { transition: none; } } /* Tabla chica dentro de un tooltip (el resumen de sesiones). Grilla y no una fila flex con space-between: con varias sesiones, el space-between alinea cada fila por su cuenta y los números quedan en zigzag. Con grilla, las dos columnas de plata caen en la misma vertical y se pueden comparar de un vistazo — que es para lo que uno abre el resumen. */ .tooltip-grid { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-1) var(--space-4); align-items: baseline; white-space: nowrap; } /* Encabezado de las columnas de números. Sin esto eran dos cifras pegadas sin decir cuál era el capital y cuál el resultado. */ .tooltip-col { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); text-align: right; } /* Estado + nombre en la misma celda. El estado va con su palabra y no sólo con el punto de color (spec §5). */ .tooltip-session { display: inline-flex; align-items: baseline; gap: var(--space-2); } /* Lista de etiqueta-valor dentro de un tooltip (el detalle de una sesión). Grilla de dos columnas y no un
suelto: así los valores arrancan todos en la misma vertical y la lista se lee como una ficha en vez de como prosa. */ .tooltip-defs { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); align-items: baseline; margin: 0; } .tooltip-defs dt { color: var(--text-tertiary); white-space: nowrap; } .tooltip-defs dd { margin: 0; } /* El color por defecto del valor va con :where() por el mismo motivo que `:where(.table) td` unas líneas más arriba: `.tooltip-defs dd` pesa (0,1,1) y las clases canónicas de color de base.css (.text-negative, .pnl-positive…) pesan (0,1,0). Sin bajarle la especificidad, esta regla le gana a todas y aplana cualquier valor coloreado a --text-secondary. Pasó de verdad: el modo "En Vivo" llevaba .text-negative para marcar que es plata real y salía del mismo gris que el resto — medido en el navegador, no se veía a simple vista. */ :where(.tooltip-defs) dd { color: var(--text-secondary); } /* Las cifras alineadas a la derecha: es lo que permite comparar dos capitales de largo distinto sin leerlos dígito por dígito. */ .tooltip-num { text-align: right; } .tooltip-more { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); color: var(--text-tertiary); } .tooltip-title { font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-2); } /* El disparador avisa que hay algo para ver sin depender del globo. */ .tooltip-trigger { cursor: help; } /* ── Tarjeta que se despliega ────────────────────────────────────────────── La tarjeta entera responde al click para abrir su panel (ver disclosure_controller.js). El cursor lo dice: sin esto, que se pueda hacer click en la tarjeta es información que sólo tiene el que la descubre de casualidad. Los controles de adentro —botones, links— traen su propio cursor y lo pisan, que es lo correcto: ahí el click hace otra cosa. */ .card--expandable { cursor: pointer; } /* El chevron gira al abrir. Es la señal de que el panel de abajo salió de acá y no apareció de la nada. */ .disclosure-chevron svg { transition: transform var(--duration-base) var(--ease-out); } .disclosure-chevron[aria-expanded="true"] svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .disclosure-chevron svg { transition: none; } } /* Efecto de hover para el HTML que genera strategy_canvas_controller. * * Esos botones traían el efecto en `onmouseover=`/`onmouseout=` inline, y la CSP * (`script-src 'self' 'strict-dynamic'`) bloquea los manejadores inline en TODOS * los entornos: un atributo `on*` no puede llevar nonce. O sea que ningún botón * del canvas respondía al mouse, en silencio. * * El valor de cada propiedad varía por botón —y algunos lo calculan en tiempo de * ejecución— así que va por variables CSS puestas en el `style=` del elemento. * Un `style=` inline SÍ está permitido: la CSP restringe scripts, no estilos. * El fallback de cada `var()` es el valor actual, así que un botón que sólo * define una de las tres no toca las otras dos. */ .ch-hover:hover { color: var(--ch-color, inherit); border-color: var(--ch-border, currentColor); background: var(--ch-bg, transparent); } /* ── Menú de acciones ──────────────────────────────────────────────────────── * * `
` nativo y no un dropdown con JavaScript: se abre solo, funciona * con teclado sin escribir un handler, y no necesita nonce — que con * `script-src 'self' 'strict-dynamic'` no es un detalle menor. * * Nació en la pantalla de una estrategia, que tenía DIEZ botones repartidos en * tres grupos, dos de ellos duplicados. */ .menu-acciones { position: relative; } /* El marcador por defecto del es un triangulito del navegador que no se puede estilar y rompe la caja del .btn. */ .menu-acciones > summary { list-style: none; cursor: pointer; } .menu-acciones > summary::-webkit-details-marker { display: none; } .menu-acciones > summary::after { content: " ▾"; opacity: 0.6; } /* Sin esto el panel se ve SIEMPRE. El navegador oculta los hijos de un `
` cerrado con su propia regla, y el `display: flex` de acá abajo le gana igual que le ganaba a `[hidden]` — la misma trampa, en su versión hermana. Medido: 309px de alto con el menú cerrado. */ .menu-acciones:not([open]) > .menu-acciones-panel { display: none; } .menu-acciones-panel { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 30; min-width: 12rem; display: flex; flex-direction: column; padding: var(--space-1); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .menu-item { display: block; width: 100%; padding: var(--space-2); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text-secondary); text-align: left; background: none; border: 0; cursor: pointer; } .menu-item:hover { background: var(--surface-sunken); color: var(--text-primary); } .menu-item--peligro { color: var(--negative); } .menu-item--peligro:hover { background: color-mix(in srgb, var(--negative) 10%, transparent); } .menu-separador { height: 1px; margin: var(--space-1) 0; background: var(--border-subtle); } /* `form_class: "contents"` en los button_to: el que Rails envuelve alrededor del botón sería un bloque más en la columna flex y rompería el espaciado. Con `display: contents` el form desaparece del layout y el botón se alinea con los links. */ .menu-acciones-panel form.contents { display: contents; } /* ── El árbol de la estrategia, legible ────────────────────────────────────── * * Reemplaza el volcado de JSON en un 
. La sangría sale de --nivel, que
 * pone la vista: así el anidamiento se ve sin generar una clase por nivel. */
.arbol-seccion { margin-bottom: var(--space-4); }
.arbol-seccion:last-child { margin-bottom: 0; }

.arbol-seccion-titulo {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.arbol-grupo { margin-left: calc(var(--nivel, 0) * var(--space-3)); }

.arbol-operador {
  display: inline-block;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  background: var(--surface-sunken);
}
.arbol-operador--or { color: var(--accent); }

/* La línea vertical es lo que hace legible el anidamiento: sin ella, tres
   niveles de sangría se leen como una lista plana con márgenes raros. */
.arbol-hijos {
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-subtle);
}

.arbol-nodo {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 2px 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.arbol-nodo--accion { color: var(--text-primary); font-weight: 500; }

.arbol-vinieta { color: var(--text-disabled); }
.arbol-flecha  { color: var(--accent); }

.arbol-rama { margin-top: var(--space-1); }
.arbol-rama-etiqueta {
  font-size: var(--text-micro);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Histograma de dispersión de backtests ───────────────────────────────────
 *
 * Reemplaza una fila de puntos sobre un eje. Aquello fallaba por dos motivos
 * independientes: el SVG iba con `preserveAspectRatio="none"` para ocupar el
 * ancho de la tarjeta, y eso escala la geometría —un círculo en un viewBox de
 * 100 unidades dentro de un contenedor de 1400 px sale 14 veces más ancho que
 * alto—; y aunque hubieran sido redondos, setenta puntos sobre una línea se
 * tapan entre sí y el montón no tiene forma legible.
 *
 * Por eso esto es HTML y no SVG: el alto de cada barra lo fija el CSS y el
 * ancho se reparte solo, así que no hay escala que deforme nada.
 */
.spread-chart {
  --spread-plot-h: 88px;
  margin-top: var(--space-1);
}

.spread-plot {
  position: relative;
  height: var(--spread-plot-h);
  border-bottom: 1px solid var(--border-default);
}

/* Las barras se apoyan en la línea de base y crecen hacia arriba. */
.spread-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  /* 2px de superficie entre barras: separa sin dibujarles un borde. */
  gap: 2px;
}

.spread-bin {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  cursor: default;
}
.spread-bin:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.spread-bin-bar {
  display: block;
  width: 100%;
  min-height: 2px;
  /* Extremo de dato redondeado arriba y en escuadra abajo: la base es el eje,
     no un borde del gráfico. */
  border-radius: 3px 3px 0 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.spread-bin-bar.is-win  { background: var(--positive); }
.spread-bin-bar.is-loss { background: var(--negative); }

/* El hover aclara toda la columna, no sólo los píxeles de la barra: el blanco
   de una barra de una sola corrida es un objetivo de dos píxeles. */
.spread-bin:hover .spread-bin-bar,
.spread-bin:focus-visible .spread-bin-bar { opacity: 0.75; }

/* ── Las dos referencias ─────────────────────────────────────────────────────
 *
 * Eran dos hairlines grises casi idénticas y sin rótulo: no había forma de saber
 * cuál era el cero y cuál la mediana. Ahora se distinguen por TRES cosas a la
 * vez —peso, color y un rótulo propio— porque una sola no alcanza: en un gráfico
 * de 88 px de alto, dos grises separados por una diferencia de opacidad se leen
 * igual.
 *
 * El cero es la referencia del dominio (ganó/perdió) y va sobria, porque el
 * cambio de color de las barras ya lo marca. La mediana es una estadística
 * calculada sobre estos datos: va más marcada y en el color de acento, que es
 * el que en toda la app significa "esto lo calculó el sistema".
 */
.spread-rule {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  /* Por ENCIMA de las barras. `.spread-bars` es absoluto y va después en el
     DOM, así que sin esto las tapaba justo en la zona densa — que es donde uno
     quiere saber de qué lado de la mediana cae el montón. */
  z-index: 1;
}
.spread-rule--zero {
  width: 1px;
  background: var(--border-default);
}
.spread-rule--median {
  width: 2px;
  margin-left: -1px;   /* centrada en su posición, no corrida a la derecha */
  background: var(--accent);
  opacity: 0.85;
}

/* La banda de rótulos vive ARRIBA del plot: adentro, una barra alta taparía el
   texto justo en el caso interesante (mucha densidad alrededor de la mediana). */
.spread-marks {
  position: relative;
  height: 15px;
  margin-bottom: 2px;
}
.spread-mark {
  position: absolute;
  bottom: 0;
  font-size: var(--text-micro);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* De qué lado del eje cuelga el texto. Sin esto, una referencia contra el borde
   derecho se sale del gráfico. */
.spread-mark.is-right { padding-left: 4px; }
.spread-mark.is-left  { transform: translateX(-100%); padding-right: 4px; }

/* Los rótulos van en tinta de texto, no en el color de la marca: un texto
   pintado del color de la serie se lee peor y no hace falta — el color lo carga
   la línea que tiene justo debajo. La mediana se distingue del cero por el peso
   tipográfico, que es lo mismo que las distingue en importancia. */
.spread-mark--zero   { color: var(--text-disabled); }
.spread-mark--median { color: var(--text-secondary); font-weight: 600; }

.spread-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: var(--text-micro);
  color: var(--text-disabled);
  font-variant-numeric: tabular-nums;
}

.spread-legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.spread-legend-swatch--win  { background: var(--positive); }
.spread-legend-swatch--loss { background: var(--negative); }

/* ── Selector de variables del editor de prompts ──────────────────────────
   Cada botón de la columna derecha de /prompts → Nueva variante. No es un
   `.badge` ni una `.filter-pill` a propósito: esos son etiquetas de una línea y
   acá hacen falta TRES datos por variable —el nombre que se inserta, qué es, y
   qué forma tiene el valor real— porque el problema de la pantalla no es
   "elegir de una lista", es "entender qué le vas a pedir al modelo". Con
   diecinueve variables (el asesor local) una pared de pastillas iguales no se
   lee: se escanea con la vista y se abandona.

   El estado `is-used` lo pone el controlador de Stimulus mirando el cuerpo, y
   viaja también en `aria-pressed` para quien no ve el color.

   La primera versión no se leía como un control: `border: 1px solid transparent`
   y ningún fondo, o sea nada hasta que le pasabas el mouse por encima. Un botón
   que sólo existe en :hover es invisible para quien no sabe que hay algo ahí
   —que es exactamente quien entra a esta pantalla por primera vez— y no existe
   en un touch. Ahora trae relieve propio (`--surface-raised` sobre la `.card`,
   que es `--surface-base`) y borde visible desde el primer vistazo. */
.var-pick {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  cursor: pointer;
}
.var-pick:hover {
  background: var(--surface-overlay);
  border-color: var(--border-strong);
}
.var-pick:active { border-color: var(--accent-border); }
/* La misma trampa de capas de `.alert.hidden`: esta clase fija `display`, así
   que le gana al `[hidden]` de la hoja del navegador y el filtro del buscador
   no escondería nada. */
.var-pick[hidden] { display: none; }
/* El foco por teclado NO se apoya en el borde: con `is-used` puesto el borde ya
   es de acento y los dos estados se confundirían. El anillo (dos sombras: halo
   suave + línea nítida) se ve igual con cualquier borde debajo. */
.var-pick:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus-ring);
}

/* Las tres líneas eran --text-xs, --text-xs y 0.65rem separadas por 0.1rem y
   0.15rem: tres renglones del mismo tamaño y casi del mismo color, o sea una
   masa gris de la que no se despega nada. La jerarquía de ahora no es sólo de
   tamaño (la escala del spec §3 va de 10,5px a 13,5px, no da para tres
   escalones) sino de FAMILIA, PESO, COLOR y AIRE, que juntos alcanzan:

     nombre  — mono 600 sobre tinta primaria: es el título y lo que se inserta;
     qué es  — sans 400 sobre tinta secundaria, con interlineado de prosa;
     ejemplo — mono chico sobre tinta terciaria: un dato de apoyo, no una frase. */
.var-pick__name {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.var-pick__desc {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
/* El valor de ejemplo, en una línea y recortado: es una muestra de la FORMA del
   dato, no el dato. Un bloque de noticias de 3000 caracteres no puede empujar
   la columna. La flecha va en `::before` —y no como texto del HTML— porque es
   puntuación que dice "esto es lo que sale", no contenido: copiar el ejemplo no
   se la lleva puesta, y no hay que traducirla. */
.var-pick__example {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.var-pick__example::before {
  content: "→ ";
  color: var(--text-disabled);
}

/* Ya está en el prompt. El tilde va en `::after` y no como carácter del HTML
   para que seleccionar el nombre no se lo lleve puesto. Ahora que el botón
   tiene fondo propio, el relleno de acento solo no alcanzaba para separarlo del
   estado normal: lleva también el borde tintado. */
.var-pick.is-used {
  background: var(--accent-subtle);
  border-color: var(--accent-border);
}
.var-pick.is-used:hover { background: var(--accent-subtle); border-color: var(--accent); }
.var-pick.is-used .var-pick__name { color: var(--accent-text); }
.var-pick.is-used .var-pick__name::after {
  content: " ✓";
  color: var(--accent-text);
}

/* La lista dentro de un grupo. Los botones venían pegados uno contra otro, así
   que diecinueve variables eran un bloque continuo sin costuras: con relieve
   propio y sin aire entre medio se leerían como una sola caja rayada. */
.var-pick-list {
  display: grid;
  /* `minmax(0, 1fr)` y no el `auto` implícito: una pista `auto` se dimensiona
     por el max-content de lo que tiene adentro, y adentro está
     `.var-pick__example` con `white-space: nowrap`. Con un ejemplo largo (el
     bloque de noticias, la sección de posición) la columna crecía hasta el ancho
     del texto entero —medido: 448px dentro de un panel de 277— y el `ellipsis`
     no recortaba nada porque nunca le faltaba lugar. El `0` de mínimo es el que
     rompe el piso automático de max-content de los items de grid. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* El alto del panel. Estaba en `max-h-96` (384px) al lado de un editor de 505px:
   sobraban 120px de aire abajo y faltaba lista arriba. Vive acá y no como
   utilidad de Tailwind porque un valor arbitrario obligaría a recompilar el
   bundle para verlo. */
.var-pick-scroll {
  max-height: 31rem;
  overflow-y: auto;
}

/* ── Editor de prompts: el espejo pintado ─────────────────────────────────
   El cuerpo se edita en un `