/* ===================================================================== SignalCandle dashboard — Editorial (dark-only) Magazine-inspired: warm dark canvas, yellow accent, mixed sans + serif italic. Bias keeps semantic green/red. Pico CSS is no longer loaded — every form element, button, table, details, and progress is styled here. ===================================================================== */ /* ============ Design tokens (Editorial) ============ `.dir-editorial` carries the non-chromatic tokens (fonts, radii, durations, compatibility aliases). Each `.dir-editorial.pal-{ink,slate,paper,sepia}` layers the colour palette on top. The default applied in is `pal-ink` — to swap palettes app-wide, change the class on the root element. The four palettes are interchangeable: every chromatic token is redefined in each of them, so nothing leaks between palettes. */ .dir-editorial { --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --radius-sm: 6px; --radius-md: 6px; --radius-lg: 12px; --radius: 12px; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur-fast: 150ms; --dur: 200ms; /* Spacing scale (4/8pt rhythm). Additive — existing rules keep their literal values; new components and refactors should reach for these tokens. */ --sp-xs: 0.5rem; --sp-sm: 1rem; --sp-md: 1.5rem; --sp-lg: 2rem; --sp-xl: 3rem; --accent-glow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); /* Compatibility aliases — some templates / partials still reference the old token names. Mapping keeps the rebrand a single-file change. */ --surface: var(--bg-elev); --surface-hover: var(--bg-hover); --surface-raised: var(--bg-elev-2); --text-secondary: var(--text-dim); --text-muted: var(--text-mute); --link-hover: var(--accent); --bull-bg: var(--bull-dim); --bull-fg: var(--bull); --bull-border: color-mix(in srgb, var(--bull) 30%, transparent); --bear-bg: var(--bear-dim); --bear-fg: var(--bear); --bear-border: color-mix(in srgb, var(--bear) 30%, transparent); --flat-bg: var(--neutral-dim); --flat-fg: var(--neutral); --flat-border: color-mix(in srgb, var(--neutral) 30%, transparent); --warn-bg: var(--accent-dim); --warn-fg: var(--neutral); --warn-border: var(--accent-rule); } /* --- Palette: INK (default) — neutral cool dark + Bone (typographic) accent --- */ .dir-editorial.pal-ink { --bg: #0a0a0b; --bg-elev: #131315; --bg-elev-2: #1a1a1d; --bg-hover: #1f1f23; --border: #232327; --border-strong: #32323a; --border-accent: #3d3d46; --text: #f4f4f5; --text-dim: #9b9ba3; --text-mute: #65656d; --text-faint: #34343a; --bull: #5ed592; --bull-dim: #5ed5921a; --bear: #f87171; --bear-dim: #f871711a; --neutral: #c9c9d1; --neutral-dim: #c9c9d11a; /* Bone accent: pure typographic — colour comes from green/red bias only */ --accent: #f4f4f5; --accent-bright: #ffffff; --accent-dim: #f4f4f510; --accent-rule: #f4f4f540; --info: #93c5fd; } /* --- Palette: SLATE — cool blue-graphite, FT.com vibes --- */ .dir-editorial.pal-slate { --bg: #0b1014; --bg-elev: #131a21; --bg-elev-2: #1a232c; --bg-hover: #1f2a35; --border: #1e2934; --border-strong: #2c3a48; --border-accent: #3a4a5b; --text: #eef2f6; --text-dim: #93a1b0; --text-mute: #5e6b78; --text-faint: #2e3842; --bull: #4ade80; --bull-dim: #4ade801a; --bear: #fb7185; --bear-dim: #fb71851a; --neutral: #facc15; --neutral-dim: #facc151a; --accent: #fbe34d; --accent-bright: #fff06a; --accent-dim: #fbe34d18; --accent-rule: #fbe34d55; --info: #93c5fd; } /* --- Palette: PAPER — light mode, magazine print --- */ .dir-editorial.pal-paper { --bg: #faf8f3; --bg-elev: #ffffff; --bg-elev-2: #f1ede4; --bg-hover: #ece8df; --border: #e2ddd1; --border-strong: #c8c2b3; --border-accent: #a8a294; --text: #16140f; --text-dim: #5b574e; --text-mute: #8a857a; --text-faint: #c2bdb1; --bull: #047857; --bull-dim: #04785714; --bear: #b91c1c; --bear-dim: #b91c1c14; --neutral: #92611a; --neutral-dim: #92611a14; --accent: #c2410c; --accent-bright: #ea580c; --accent-dim: #c2410c12; --accent-rule: #c2410c66; --info: #1d4ed8; } /* --- Palette: SEPIA — original warm dark (kept for reference / fallback) --- */ .dir-editorial.pal-sepia { --bg: #0d0c0a; --bg-elev: #161512; --bg-elev-2: #1c1b17; --bg-hover: #22211c; --border: #242320; --border-strong: #34332e; --border-accent: #3d3c36; --text: #f5f3ee; --text-dim: #a09d94; --text-mute: #6b6960; --text-faint: #3a3933; --bull: #5ed592; --bull-dim: #5ed5921a; --bear: #f87171; --bear-dim: #f871711a; --neutral: #d4c361; --neutral-dim: #d4c3611a; --accent: #f5d04a; --accent-bright: #fbe25c; --accent-dim: #f5d04a1a; --accent-rule: #f5d04a55; --info: #93c5fd; } /* ============ Base / reset (no Pico) ============ */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; } html, body { min-height: 100vh; min-height: 100dvh; } body { background: var(--bg); color: var(--text); display: flex; flex-direction: column; margin: 0; line-height: 1.5; font-feature-settings: "tnum" 1; } nav.topnav { flex-shrink: 0; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; } h4 { font-size: .95rem; } p { margin: 0 0 .75rem; } small { font-size: .78rem; } code, kbd, samp, .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; } code { font-size: .85em; color: var(--accent); background: var(--bg-elev-2); padding: .08em .35em; border-radius: 3px; } a { color: var(--text); transition: color var(--dur-fast) var(--ease); text-decoration: none; } a:hover { color: var(--accent); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* Skip-link: invisible until focused via keyboard. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: .65rem 1rem; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: .85rem; font-weight: 500; } .skip-link:focus, .skip-link:focus-visible { left: 1rem; top: 1rem; outline: 2px solid var(--accent); outline-offset: 2px; } main.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 1.5rem 1rem 3rem; flex: 1 0 auto; } @media (min-width: 1440px) { main.container { max-width: min(1600px, calc(100vw - 4rem)); padding-inline: clamp(1rem, 3vw, 2rem); } .lead-story p { max-width: 70ch; } } /* ============ Top nav / masthead ============ */ nav.topnav { background: var(--bg); border-bottom: 1px solid var(--border); padding: 0; position: sticky; top: 0; z-index: 10; } nav.topnav * { margin: 0; padding: 0; list-style: none; } nav.topnav a { transition: color var(--dur-fast) var(--ease); } .topnav-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; padding: 0 1.25rem; } /* Explicit grid-column assignments. Without these, when .topnav-tabs is display:none on mobile, grid auto-placement shifts .topnav-utility into column 2 (the auto track), which sizes to content and leaves a phantom 1fr empty column on the right — pushing the avatar away from the edge. */ .topnav-brand { grid-column: 1; justify-self: start; } .topnav-tabs { grid-column: 2; justify-self: center; display: flex; gap: 1.75rem; height: 100%; } .topnav-utility { grid-column: 3; justify-self: end; } .topnav-brand { display: flex; align-items: center; gap: .65rem; } .brand-link { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; font-size: 1.1rem; } .brand-link:hover { color: var(--text); } .brand-mark { flex-shrink: 0; transition: transform var(--dur) var(--ease); } .brand-mark .mark-bull { color: var(--bull); } .brand-mark .mark-bear { color: var(--bear); } .brand-link:hover .brand-mark { transform: translateY(-1px); } .brand-divider { color: var(--border-strong); font-weight: 300; font-size: 1rem; line-height: 1; user-select: none; } .brand-env { font-family: var(--font-mono); font-size: .65rem; font-weight: 500; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.1em; padding: .15rem .5rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); } .topnav-utility { display: flex; align-items: center; gap: 1rem; } .topnav-utility > a { color: var(--text-dim); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .topnav-utility > a:hover { color: var(--accent); } /* User menu —
/ disclosure. Opens a dropdown so the destructive logout action sits behind two intentional clicks instead of being the avatar itself. */ .user-menu { position: relative; display: inline-block; } .user-menu > summary { list-style: none; cursor: pointer; } .user-menu > summary::-webkit-details-marker { display: none; } .user-menu > summary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); border-radius: 999px; } .user-btn { display: inline-flex; align-items: center; gap: 0; background: transparent; color: var(--text-dim); border: 1px solid var(--border); padding: .15rem; border-radius: 999px; font-size: .76rem; font-weight: 500; cursor: pointer; line-height: 1; height: auto; font-family: inherit; transition: all var(--dur-fast) var(--ease); } .user-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-hover); } .user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); font-family: var(--font-sans); font-size: .72rem; font-weight: 600; border: 1px solid var(--accent-rule); flex-shrink: 0; } .user-btn { gap: .45rem; padding: .15rem .55rem .15rem .15rem; } .user-name { letter-spacing: -0.005em; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } /* Scheduler status dot — small, always visible health indicator. */ .scheduler-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bull); box-shadow: 0 0 8px color-mix(in srgb, var(--bull) 55%, transparent); flex-shrink: 0; cursor: help; } /* Kill switch chip — only rendered when RiskConfig.kill_switch is True. */ .kill-switch-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border-radius: 999px; background: var(--bear-dim); color: var(--bear); border: 1px solid var(--bear-border); font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; transition: background var(--dur-fast) var(--ease); } .kill-switch-chip:hover { background: color-mix(in srgb, var(--bear) 20%, var(--bear-dim)); } .kill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bear); box-shadow: 0 0 6px color-mix(in srgb, var(--bear) 70%, transparent); animation: chip-pulse 1.6s var(--ease) infinite; } /* User dropdown — opens from .user-menu/
. The right offset gives visible breathing room from the viewport edge instead of hugging it. */ .user-dropdown { position: absolute; top: calc(100% + 8px); right: .5rem; min-width: 240px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); padding: .5rem !important; z-index: 30; animation: user-dropdown-in 160ms var(--ease) both; } @keyframes user-dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .user-dropdown-header { padding: .9rem 1.1rem 1rem !important; border-bottom: 1px solid var(--border); margin: -.15rem -.15rem .35rem; display: flex; flex-direction: column; gap: .2rem; } .user-dropdown-name { font-weight: 500; font-size: .9rem; color: var(--text); letter-spacing: -0.005em; word-break: break-word; } .user-dropdown-email { font-family: var(--font-mono); font-size: .7rem; color: var(--text-mute); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-dropdown-item { display: block !important; width: 100%; padding: .7rem 1.1rem !important; font-family: var(--font-sans); font-size: .88rem; font-weight: 400; text-align: left; color: var(--text-dim); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .user-dropdown-item:hover, .user-dropdown-item:focus-visible { background: var(--bg-hover); color: var(--text); outline: none; } .user-dropdown-rule { margin: .35rem -.5rem; border: none; border-top: 1px solid var(--border); } .user-dropdown-form { margin: 0; } /* Destructive action — separated visually + colored per §8 destructive-emphasis */ .user-dropdown-danger { color: var(--bear); } .user-dropdown-danger:hover, .user-dropdown-danger:focus-visible { background: var(--bear-dim); color: var(--bear); } .tab { display: inline-flex; align-items: center; height: 100%; color: var(--text-dim); font-size: .82rem; font-weight: 500; letter-spacing: -0.005em; border-bottom: 2px solid transparent; padding: 0; margin-bottom: -1px; } .tab:hover { color: var(--text); } .tab.is-active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; } /* ============ Breadcrumb ============ */ .breadcrumb { font-family: var(--font-mono); font-size: .7rem; margin-bottom: .75rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; } .breadcrumb ul { padding: 0; margin: 0; display: flex; gap: .5rem; list-style: none; flex-wrap: wrap; } .breadcrumb li { display: inline-flex; align-items: center; } .breadcrumb li + li::before { content: "/"; color: var(--text-faint); margin-right: .5rem; } .breadcrumb li[aria-current="page"] { color: var(--text-dim); } .breadcrumb li:first-child a::before { content: "← "; color: var(--text-faint); margin-right: .15rem; } /* ============ Page header ============ */ .page-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; padding-bottom: .85rem; border-bottom: 1px solid var(--border); } .page-header h2 { margin: 0; font-weight: 600; letter-spacing: -0.025em; font-size: 1.65rem; } .page-header h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; font-size: 1rem; } .page-header .sub { color: var(--text-dim); margin: .35rem 0 0; font-size: .85rem; } .page-header .counter { font-family: var(--font-mono); color: var(--text-mute); font-size: .68rem; padding: .2rem .6rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); text-transform: uppercase; letter-spacing: 0.08em; } /* ============ Symbol grid ============ */ .symbol-grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .symbol-card { background: var(--bg-elev); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; transition: background var(--dur) var(--ease); text-decoration: none; color: inherit; position: relative; } .symbol-card:hover { background: var(--bg-hover); } .symbol-card:hover a, .symbol-card a:hover { color: var(--accent); } .symbol-card:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); } .symbol-card .ticker { font-family: var(--font-mono); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; color: var(--text); } .symbol-card .row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .symbol-card .candle-type { font-family: var(--font-serif); font-style: italic; font-size: .92rem; color: var(--text-dim); } .symbol-card .timestamp { font-family: var(--font-mono); font-size: .68rem; color: var(--text-mute); margin-top: auto; letter-spacing: 0.04em; } .symbol-card .empty { font-family: var(--font-serif); font-style: italic; font-size: .85rem; color: var(--text-mute); } /* ============ Chip (bias pills) — names preserved on purpose ============ */ .chip { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .65rem; font-weight: 600; padding: .22rem .5rem; border-radius: var(--radius-sm); border: 1px solid transparent; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; } .chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .chip-bullish { background: var(--bull-dim); color: var(--bull); } .chip-bullish::before { background: var(--bull); box-shadow: 0 0 6px color-mix(in srgb, var(--bull) 60%, transparent); } .chip-bearish { background: var(--bear-dim); color: var(--bear); } .chip-bearish::before { background: var(--bear); box-shadow: 0 0 6px color-mix(in srgb, var(--bear) 60%, transparent); } .chip-neutral { background: var(--neutral-dim); color: var(--neutral); } .chip-neutral::before { background: var(--neutral); } /* ============ Panel ============ */ .panel { padding: 1rem 1.15rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; } .panel h4 { margin-top: 0; font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; } .panel summary { cursor: pointer; color: var(--text-dim); font-weight: 500; font-size: .85rem; list-style: none; user-select: none; } .panel summary::-webkit-details-marker { display: none; } .panel summary::before { content: "▸"; display: inline-block; margin-right: .4rem; transition: transform var(--dur-fast) var(--ease); color: var(--text-mute); } .panel[open] summary { color: var(--text); margin-bottom: .85rem; } .panel[open] summary::before { transform: rotate(90deg); } .panel-bull { border-color: var(--bull-border); background: var(--bull-dim); } .panel-bear { border-color: var(--bear-border); background: var(--bear-dim); } .panel-warn { border-color: var(--accent-rule); background: var(--accent-dim); } .panel-warn strong { color: var(--accent); } /* ============ Trade plan ============ */ .trade-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; } .trade-plan-head h4 { margin: 0; } .trade-plan-meta { display: inline-flex; align-items: center; gap: .65rem; } .conf-pill { display: inline-flex; align-items: baseline; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; background: var(--bg-elev-2); border: 1px solid var(--border); font-size: .78rem; color: var(--text-dim); font-variant-numeric: tabular-nums; } .conf-pill strong { color: var(--text); font-size: .9rem; font-weight: 600; } .conf-pill .conf-pct { color: var(--text-mute); font-size: .72rem; } .trade-plan-table { margin-top: 0; } .trade-plan-table .num { font-variant-numeric: tabular-nums; } .trade-plan-blocked { border-color: var(--bear-border); background: color-mix(in srgb, var(--bear-dim) 35%, var(--bg-elev)); } .status-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } .status-allow { color: var(--bull); background: var(--bull-dim); border: 1px solid var(--bull-border); } .status-block { color: var(--bear); background: var(--bear-dim); border: 1px solid var(--bear-border); } .block-reason { margin-top: .85rem; padding-top: .85rem; border-top: 1px dotted var(--border); font-size: .82rem; } .block-reason strong { color: var(--bear); } /* ============ Chart wrapper ============ */ .chart-wrapper { position: relative; height: 360px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem; margin: 1rem 0 1.5rem; } @media (min-width: 1440px) { .chart-wrapper { height: 440px; } } /* On narrow phones the fixed 360px height squashes the candle width below readable. Switch to a 16:9 aspect ratio so the chart scales with the container instead. */ @media (max-width: 480px) { .chart-wrapper { height: auto; aspect-ratio: 16 / 9; } } /* ============ Tables ============ */ table.compact { border-collapse: collapse; width: 100%; } table.compact th, table.compact td { padding: .5rem .7rem; border-bottom: 1px solid var(--border); font-size: .85rem; text-align: left; } table.compact th { color: var(--text-mute); font-weight: 500; text-transform: uppercase; font-size: .65rem; letter-spacing: 0.08em; padding-top: .35rem; padding-bottom: .35rem; font-family: var(--font-mono); } table.compact tbody tr { transition: background var(--dur-fast) var(--ease); } table.compact tbody tr:hover { background: var(--bg-hover); } table.compact td.num { text-align: right; font-family: var(--font-mono); } table.compact.striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-elev) 50%, transparent); } table.compact.striped tbody tr:nth-child(even):hover { background: var(--bg-hover); } /* Trailing "Ver →" / "Detalle →" link in row tables. Dim by default so it reads as supporting text; on hover (or when its row is hovered) brightens to --text plus an accent-coloured underline. Underline is the affordance that survives the Bone palette where --accent matches --text. */ .row-cta { color: var(--text-dim); font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; white-space: nowrap; } table.compact tbody tr:hover .row-cta, .row-cta:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-rule); text-underline-offset: 2px; } /* ============ Form controls ============ */ input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input:not([type]), select, textarea { width: 100%; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: .85rem; padding: .5rem .7rem; line-height: 1.4; margin-bottom: .65rem; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); appearance: none; -webkit-appearance: none; } input.mono, select.mono, textarea.mono { font-family: var(--font-mono); } input:focus, select:focus, textarea:focus { box-shadow: var(--accent-glow); border-color: var(--accent); outline: none; } input::placeholder, textarea::placeholder { color: var(--text-mute); } select { background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; } .panel label, label { font-size: .82rem; margin-bottom: .65rem; display: block; color: var(--text); } .panel label > span:first-child, label > span:first-child { display: block; font-weight: 500; color: var(--text); margin-bottom: .35rem; font-size: .8rem; } .panel label small, label small { display: block; font-size: .72rem; color: var(--text-mute); margin-top: .3rem; } .panel pre, pre { margin: .55rem 0; padding: .6rem .8rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .8rem; line-height: 1.45; overflow-x: auto; color: var(--text); } .panel pre code, pre code { background: transparent; padding: 0; color: inherit; } /* ============ Buttons ============ */ button, [role="button"] { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-family: var(--font-sans); font-size: .82rem; font-weight: 500; letter-spacing: -0.005em; padding: .55rem 1rem; min-height: 40px; line-height: 1.4; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-elev-2); color: var(--text); cursor: pointer; transition: all var(--dur-fast) var(--ease); text-decoration: none; white-space: nowrap; } button:hover, [role="button"]:hover { background: var(--bg-hover); border-color: var(--border-accent); } /* Primary action — submits, the main CTA on a page */ button[type="submit"]:not(.user-btn):not(.user-dropdown-item), [role="button"]:not(.secondary):not(.user-btn):not(.user-dropdown-item) { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; } button[type="submit"]:not(.user-btn):not(.user-dropdown-item):hover, [role="button"]:not(.secondary):not(.user-btn):not(.user-dropdown-item):hover { background: var(--accent-bright); border-color: var(--accent-bright); } button[type="submit"]:not(.user-btn):not(.user-dropdown-item):disabled { opacity: .4; cursor: not-allowed; background: var(--bg-elev-2); color: var(--text-mute); border-color: var(--border); } /* Secondary — “Limpiar” style */ [role="button"].secondary { background: transparent; color: var(--text-dim); border-color: var(--border-strong); font-weight: 500; } [role="button"].secondary:hover { color: var(--text); border-color: var(--border-accent); background: var(--bg-hover); } /* The user-btn in topnav has its own treatment (above) — protect from the generic button rules. */ .user-btn { background: transparent; color: var(--text-dim); border-color: var(--border); } /* ============ ============ */ progress { appearance: none; -webkit-appearance: none; width: 100%; height: 4px; border: none; background: var(--bg-elev-2); border-radius: 999px; overflow: hidden; color: var(--accent); margin: .3rem 0; } progress::-webkit-progress-bar { background: var(--bg-elev-2); border-radius: 999px; } progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; } progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; } progress:indeterminate { background: linear-gradient(90deg, var(--bg-elev-2) 0%, var(--accent-dim) 50%, var(--bg-elev-2) 100%); background-size: 200% 100%; animation: progress-indeterminate 1.4s linear infinite; } @keyframes progress-indeterminate { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ============ Grid (Pico-compat) ============ */ .grid { display: grid; /* min(320px, 100%) — cada columna pide ≥320px, por debajo colapsa a 1. Sin esto, minmax(0, 1fr) deja que las columnas se aplasten al infinito en mobile y el contenido (tablas) overflowa o se trunca. */ grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1rem; } /* ============ Utilities ============ */ .u-muted { color: var(--text-mute); } .u-secondary { color: var(--text-dim); } .u-bull { color: var(--bull); } .u-bear { color: var(--bear); } .u-accent { color: var(--accent); } .u-mini { font-size: .72rem; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; margin-left: .5rem; } .u-error { color: var(--bear); } .u-dash { color: var(--text-mute); font-weight: 400; } .u-mt-sm { margin-top: .5rem; } .u-mt-md { margin-top: 1rem; } .u-mb-0 { margin-bottom: 0; } .u-block { display: block; } /* Form row with input + button(s) side by side */ .form-actions { display: flex; gap: .5rem; align-items: stretch; } .form-actions input, .form-actions select { flex: 1; margin: 0; } .form-actions > button, .form-actions > [role="button"] { margin: 0; padding: .5rem .95rem; white-space: nowrap; } /* Heading + inline ticker (analysis_detail, backtest_detail) */ .title-mono { letter-spacing: -0.02em; } .title-mono .mono { font-weight: inherit; } /* Probability bar cell (analysis_detail scenarios table) */ .prob-cell { white-space: nowrap; } .prob-cell progress { width: 60px; vertical-align: middle; margin: 0; } .prob-cell .num { font-size: .75rem; color: var(--text-mute); margin-left: .35rem; } /* Rich list with generous leading (recommendations) */ .rich-list { margin: 0; padding-left: 1.2rem; line-height: 1.7; } /* ============ Editorial utilities (for Phases 2-5) ============ */ .ed-eyebrow { font-family: var(--font-mono); font-size: .68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); font-weight: 500; } .ed-eyebrow.accent { color: var(--accent); } .ed-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; } .ed-rule { border: none; border-top: 1px solid var(--border); margin: 1rem 0; } .ed-rule.thick { border-top: 2px solid var(--text); } .ed-rule.accent { border-top: 2px solid var(--accent); } .ed-underline { background-image: linear-gradient(var(--accent-rule), var(--accent-rule)); background-position: 0 88%; background-size: 100% 30%; background-repeat: no-repeat; padding: 0 2px; } .ed-quote { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); position: relative; padding-left: 1.1rem; margin: 1rem 0; } .ed-quote::before { content: ''; position: absolute; left: 0; top: .35rem; bottom: .35rem; width: 2px; background: var(--accent); } /* ============ Motion ============ */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } main.container { animation: fade-in-up 280ms var(--ease) both; } .symbol-card { animation: fade-in-up 320ms var(--ease) both; animation-delay: calc(var(--stagger-index, 0) * 40ms); } @keyframes chip-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.15); } } .chip-bullish::before, .chip-bearish::before { animation: chip-pulse 2.4s var(--ease) infinite; } /* ============ Scrollbar ============ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--bg); border-radius: 999px; transition: background var(--dur-fast) var(--ease); } ::-webkit-scrollbar-thumb:hover { background: var(--text-mute); } html { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; } ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--text); } /* ============ Today page (Editorial cover) ============ */ /* Cover hero */ .today-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 2px solid var(--text); } .today-eyebrow-row { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; } .today-headline { font-size: 3.4rem; font-weight: 400; letter-spacing: -0.035em; line-height: 1; margin: 0; color: var(--text); } .today-headline .ed-italic { font-size: 1.05em; } .today-lead { font-size: 1.05rem; color: var(--text-dim); line-height: 1.55; max-width: 36rem; margin: 1.5rem 0 0; } .today-toc-aside { position: relative; min-height: 12rem; } .today-edition-num { position: absolute; top: -1rem; right: 0; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 11rem; line-height: .8; /* 8% of --text reads as a watermark under both Ink (Bone accent) and Sepia (yellow accent) without being so faint it disappears on Ink. */ color: color-mix(in srgb, var(--text) 8%, transparent); user-select: none; pointer-events: none; letter-spacing: -0.02em; } .today-toc-content { position: relative; margin-top: 5rem; } .today-toc { list-style: none; padding: 0; margin: .75rem 0 0; font-size: .88rem; color: var(--text-dim); line-height: 2.1; } .today-toc li { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--border-strong); } .today-toc li:last-child { border-bottom: none; } .toc-em { color: var(--text); } /* KPI strip — no cards, just hairline dividers */ .kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 3rem; } .kpi { padding-right: 1.75rem; } .kpi + .kpi { padding-left: 1.75rem; border-left: 1px solid var(--border); } .kpi-value { font-size: 2.6rem; font-weight: 500; color: var(--text); margin-top: .65rem; line-height: 1; letter-spacing: -0.02em; } .kpi-of { font-size: 1.4rem; color: var(--text-mute); font-weight: 400; } .kpi-sub { font-size: .82rem; color: var(--text-dim); margin-top: .55rem; } /* Section title pattern: eyebrow + heading + optional sub */ .section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: .85rem; border-bottom: 2px solid var(--text); } .section-title-text { margin: .25rem 0 0; font-size: 1.65rem; font-weight: 500; letter-spacing: -0.025em; } .section-title-sub { font-size: .82rem; color: var(--text-dim); } /* Watchlist grid — hairline-border “magazine grid” */ .watchlist-grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 3rem; } .watch-card { background: var(--bg); padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; text-decoration: none; color: inherit; transition: background var(--dur) var(--ease); content-visibility: auto; contain-intrinsic-size: 180px; } .watch-card:hover { background: var(--bg-elev); } .watch-card a:hover { color: var(--accent); } .watch-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; } .watch-ticker { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.015em; margin-top: .35rem; font-family: var(--font-mono); } .watch-price-row { display: flex; align-items: baseline; gap: .65rem; } .watch-price { font-size: 1.5rem; font-weight: 500; } .watch-change { font-size: .82rem; font-weight: 500; } .watch-spark { height: 56px; display: flex; align-items: stretch; } .watch-spark .sparkline { width: 100%; height: 100%; } .watch-card-foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: .85rem; border-top: 1px dotted var(--border-strong); font-size: .78rem; color: var(--text-dim); } .watch-candle .ed-italic { font-size: 1.05rem; } .watch-time { color: var(--text-mute); font-size: .72rem; } .is-bull { color: var(--bull); } .is-bear { color: var(--bear); } .is-mute { color: var(--text-mute); } /* Lead story + sidebar row */ .lead-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; margin-top: 1rem; } .lead-story { min-width: 0; } .lead-headline { font-size: 2rem; font-weight: 400; letter-spacing: -0.025em; line-height: 1.18; margin: .85rem 0 1rem; } .lead-cta { display: flex; gap: .65rem; margin-top: 1.5rem; flex-wrap: wrap; } .lead-empty { color: var(--text-dim); font-size: .95rem; margin-top: 1rem; max-width: 38rem; } /* Drop cap paragraph */ .drop-cap-p { font-size: .95rem; color: var(--text-dim); line-height: 1.65; margin: 0; } .drop-cap-p strong { color: var(--text); font-weight: 600; } .drop-cap { float: left; font-family: var(--font-serif); font-style: italic; font-size: 3.5rem; line-height: .85; color: var(--accent); padding-right: .65rem; padding-top: .35rem; } /* Sidebar (backtests) */ .lead-sidebar { border-left: 1px solid var(--border); padding-left: 2rem; } .sidebar-title { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.015em; margin: .25rem 0 1.25rem; } .bt-row { display: block; padding: 1rem 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; transition: opacity var(--dur-fast) var(--ease); } .bt-row:hover { opacity: .8; color: inherit; } .bt-row:hover .bt-ticker { color: var(--accent); } .bt-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .bt-ticker { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin-top: .25rem; font-family: var(--font-mono); transition: color var(--dur-fast) var(--ease); } .bt-stats { text-align: right; } .bt-stats-num { font-size: 1.6rem; font-weight: 500; color: var(--text); display: block; line-height: 1; } .sidebar-link { display: inline-block; margin-top: 1rem; font-family: var(--font-mono); font-size: .8rem; color: var(--accent); } .sidebar-empty { margin-top: 1rem; font-size: .9rem; } /* ============ Symbol detail (feature article) ============ */ .detail-header { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: flex-end; margin: .5rem 0 1.5rem; } .detail-title-block { min-width: 0; } .detail-title { font-family: var(--font-mono); font-size: 5rem; font-weight: 600; margin: .65rem 0 0; letter-spacing: -0.04em; line-height: .95; color: var(--text); } .detail-tagline { font-size: 1.25rem; color: var(--text-dim); margin: .85rem 0 0; } .detail-price-block { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .85rem; } .detail-price-row { display: flex; align-items: baseline; gap: 1rem; justify-content: flex-end; } .detail-price { font-size: 2.6rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text); } .detail-change { font-size: 1.05rem; font-weight: 500; } .detail-bias-row { display: flex; gap: .5rem; } /* Stats strip (detail) — 5 columns with hairline dividers */ .stats-strip { display: grid; grid-template-columns: repeat(5, 1fr); margin: 1.5rem 0 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .stat-cell { padding-right: 1.5rem; } .stat-cell + .stat-cell { padding-left: 1.5rem; border-left: 1px solid var(--border); } .stat-value { font-size: 1.4rem; font-weight: 500; margin-top: .55rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); } /* Pull-quote row (detail) — big quote on the left, drop-cap intro on the right */ .pullquote-row { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; margin: 0 0 2.5rem; align-items: center; } .pullquote-row .ed-quote { font-size: 1.85rem; } /* Figure (chart with eyebrow + title) */ .figure { margin-bottom: 3rem; } .figure-head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: .65rem; margin-bottom: .35rem; } .figure-title { margin: .15rem 0 0; font-size: 1rem; font-weight: 500; color: var(--text); } .figure .chart-wrapper { margin: 0; } /* Detail body row (analyses + sidebar) */ .detail-body { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; margin-top: .5rem; } .detail-analyses { min-width: 0; } .detail-sidebar { border-left: 1px solid var(--border); padding-left: 2rem; display: flex; flex-direction: column; gap: 2rem; } .sidebar-block { padding-bottom: 1.5rem; } .sidebar-block + .sidebar-block { border-top: 1px solid var(--border); padding-top: 1.5rem; } .sidebar-block-title { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.015em; margin: .25rem 0 1rem; } .sidebar-block-desc { font-size: .85rem; color: var(--text-dim); margin: 0 0 1rem; line-height: 1.55; } /* Bias distribution bars (detail sidebar) */ .bias-dist { display: flex; flex-direction: column; gap: .25rem; } .bias-dist-row { display: flex; justify-content: space-between; font-size: .85rem; margin-top: .65rem; } .bias-dist-row:first-child { margin-top: 0; } .bias-bar { height: 4px; background: var(--bg-elev-2); overflow: hidden; margin-top: .35rem; } .bias-bar-fill { height: 100%; } /* ============ Backtests (cards + insight callout) ============ */ /* "Lectura rápida" callout — subtle accent fill + 3px left rule. Reads as yellow under pal-sepia and as Bone-white under pal-ink. */ .callout-accent { background: var(--accent-dim); border-left: 3px solid var(--accent); padding: 1.5rem 1.75rem; margin: 1rem 0 2.5rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .callout-quote { font-size: 1.4rem; line-height: 1.4; color: var(--text); margin: .5rem 0 0; letter-spacing: -0.005em; } /* Cards grid */ .bt-cards-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); margin-bottom: 2.5rem; } .bt-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.6rem 1.25rem; display: flex; flex-direction: column; gap: 1.15rem; } .bt-card-headline { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; } .bt-card-ticker { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 600; margin: 0; letter-spacing: -0.02em; line-height: 1; } .bt-card-winrate { text-align: right; } .bt-card-winrate-num { font-size: 3rem; font-weight: 500; color: var(--bull); line-height: 1; letter-spacing: -0.02em; } .bt-card-pct { font-size: 1.2rem; } /* Segmented bias-bar (uses the .bias-bar from detail sidebar) */ .bias-bar.bias-bar-tall { height: 10px; display: flex; } .bias-bar-seg { height: 100%; } .bt-card-bar { display: flex; flex-direction: column; gap: .55rem; } .bt-card-bar-legend { display: flex; justify-content: space-between; font-size: .75rem; } .bt-card-bar-empty { padding: .65rem 0; font-size: .85rem; } .bt-card-foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: .85rem; border-top: 1px dotted var(--border-strong); font-size: .82rem; } .bt-card-link { color: var(--text-dim); font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; } .bt-card:hover .bt-card-link, .bt-card-link:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-rule); text-underline-offset: 2px; } /* ============ Run page (Operaciones) ============ */ /* Scheduler banner — green left rule + dot + headline */ .scheduler-banner { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1rem 1.25rem; margin: 1.5rem 0 2rem; background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--bull); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .scheduler-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bull); box-shadow: 0 0 12px color-mix(in srgb, var(--bull) 60%, transparent); } .scheduler-content { min-width: 0; } .scheduler-headline { font-size: .92rem; font-weight: 500; color: var(--text); } .scheduler-meta { margin-top: .3rem; } /* Run cards (analysis + backtest) */ .run-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 2.5rem; } .run-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.6rem; display: flex; flex-direction: column; } .run-card-title { font-size: 1.65rem; font-weight: 500; margin: .35rem 0 .8rem; letter-spacing: -0.02em; } .run-card-desc { font-size: .85rem; color: var(--text-dim); line-height: 1.55; margin: 0 0 1.25rem; } .run-form { display: flex; flex-direction: column; gap: 1rem; } .run-form-row { display: grid; grid-template-columns: 1fr 100px; gap: .7rem; } .run-form label { margin-bottom: 0; } .run-form input, .run-form select { margin-bottom: 0; } /* Primary CTA fills the card width */ button.run-card-cta { width: 100%; padding: .75rem 1rem; font-size: .9rem; margin-top: auto; } /* Activity log (Bitácora) */ .activity-log { border-top: 1px solid var(--border); margin-top: .5rem; } .activity-row { display: grid; grid-template-columns: 40px 110px 90px 130px 1fr 90px; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; transition: background var(--dur-fast) var(--ease); } .activity-row:hover { background: var(--bg-elev); color: inherit; } .activity-row:hover .activity-ticker { color: var(--accent); } .activity-num { font-size: 1.4rem; color: var(--text-mute); line-height: 1; text-align: center; } .activity-time { font-size: .8rem; color: var(--text-dim); letter-spacing: 0.02em; } .activity-kind { display: inline-block; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: .25rem .55rem; border-radius: 999px; background: var(--bg-elev-2); color: var(--text-dim); width: fit-content; } .activity-kind.kind-analysis { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); } .activity-kind.kind-backtest { color: var(--neutral); background: var(--neutral-dim); } .activity-ticker { font-family: var(--font-mono); font-weight: 600; font-size: .98rem; transition: color var(--dur-fast) var(--ease); } .activity-detail { color: var(--text-dim); font-size: .85rem; display: flex; align-items: baseline; gap: .55rem; min-width: 0; } .activity-badge { color: var(--text); font-size: .78rem; font-weight: 500; letter-spacing: 0.04em; } .activity-sep { color: var(--text-faint); } .activity-detail .ed-italic { color: var(--text); font-size: 1rem; } .activity-status { text-align: right; font-size: .78rem; font-family: var(--font-mono); } /* ============ Symbol index (numbered list) ============ */ .symbol-index { margin-top: 1rem; } .symbol-index-row { display: grid; grid-template-columns: 56px 1.2fr 1fr 200px 140px 80px; align-items: center; gap: 1.5rem; padding: 1.65rem 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; transition: background var(--dur-fast) var(--ease); } .symbol-index-row:first-child { border-top: 1px solid var(--border); } .symbol-index-row:hover { background: var(--bg-elev); } .symbol-index-row:hover .symbol-index-ticker { color: var(--accent); } .symbol-index-num { font-size: 2rem; color: var(--text-mute); line-height: 1; text-align: right; } .symbol-index-ticker { font-family: var(--font-mono); font-size: 1.65rem; font-weight: 600; letter-spacing: -0.015em; color: var(--text); transition: color var(--dur-fast) var(--ease); } .symbol-index-candle { font-size: 1.05rem; color: var(--text-dim); } .symbol-index-spark { display: flex; align-items: stretch; } .symbol-index-spark .sparkline { width: 100%; height: 48px; } .symbol-index-price { text-align: right; } .symbol-index-price-num { font-size: 1.05rem; font-weight: 500; color: var(--text); } .symbol-index-change { font-size: .78rem; margin-top: .2rem; } .symbol-index-bias { text-align: right; } /* ============ Responsive — collapse to single column under 900px ============ */ @media (max-width: 900px) { /* Today */ .today-hero { grid-template-columns: 1fr; gap: 2rem; } .today-toc-aside { min-height: 0; } .today-edition-num { font-size: 7rem; top: -.5rem; } .today-toc-content { margin-top: 3rem; } .today-headline { font-size: 2.2rem; } .kpi-strip { grid-template-columns: 1fr 1fr; gap: 0; } .kpi { padding: 1rem; border-bottom: 1px solid var(--border); } .kpi + .kpi { padding-left: 1rem; border-left: 1px solid var(--border); } .kpi:nth-child(2n+1) { border-left: none !important; padding-left: 0; } .kpi-value { font-size: 1.8rem; } .lead-row { grid-template-columns: 1fr; gap: 2rem; } .lead-sidebar { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 1.5rem; } .lead-headline { font-size: 1.5rem; } .section-title-text { font-size: 1.3rem; } /* Detail */ .detail-header { grid-template-columns: 1fr; gap: 1.25rem; align-items: flex-start; } .detail-title { font-size: 3rem; } .detail-price-block { align-items: flex-start; text-align: left; } .detail-price-row { justify-content: flex-start; } .detail-price { font-size: 1.85rem; } .stats-strip { grid-template-columns: 1fr 1fr; gap: 0; } .stat-cell { padding: 1rem; border-bottom: 1px solid var(--border); } .stat-cell + .stat-cell { padding-left: 1rem; border-left: 1px solid var(--border); } .stat-cell:nth-child(2n+1) { border-left: none !important; padding-left: 0; } .stat-value { font-size: 1.05rem; } .pullquote-row { grid-template-columns: 1fr; gap: 1.5rem; } .pullquote-row .ed-quote { font-size: 1.4rem; } .detail-body { grid-template-columns: 1fr; gap: 2rem; } .detail-sidebar { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 1.5rem; } /* Run page */ .run-cards { grid-template-columns: 1fr; } .activity-row { grid-template-columns: 32px auto 1fr auto; grid-template-areas: "num time kind status" "num ticker ticker status" "num detail detail status"; gap: .35rem .75rem; padding: .9rem 0; } .activity-num { grid-area: num; font-size: 1.1rem; align-self: start; padding-top: .1rem; } .activity-time { grid-area: time; } .activity-kind { grid-area: kind; justify-self: start; } .activity-ticker { grid-area: ticker; font-size: 1rem; } .activity-detail { grid-area: detail; flex-wrap: wrap; } .activity-status { grid-area: status; align-self: start; padding-top: .15rem; } /* Index */ .symbol-index-row { grid-template-columns: 40px 1fr auto; grid-template-areas: "num ticker bias" "num candle bias" "num spark price"; gap: .65rem 1rem; padding: 1.25rem 0; } .symbol-index-num { grid-area: num; font-size: 1.5rem; align-self: start; padding-top: .25rem; } .symbol-index-ticker-block { grid-area: ticker; } .symbol-index-candle { grid-area: candle; font-size: .95rem; } .symbol-index-spark { grid-area: spark; max-width: 180px; } .symbol-index-spark .sparkline { height: 32px; } .symbol-index-price { grid-area: price; } .symbol-index-bias { grid-area: bias; align-self: start; } } /* ============ Bottom nav (mobile only) ============ */ /* Always rendered in markup but hidden by default; the <=640px media query below shows it and reserves bottom padding on the body. */ .bottomnav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--bg); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0); } .bottomnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: .55rem 0 .65rem; color: var(--text-mute); text-decoration: none; font-size: .68rem; font-weight: 500; letter-spacing: 0.04em; min-height: 56px; /* tap area >= 44pt with comfortable spacing */ position: relative; transition: color var(--dur-fast) var(--ease); } .bottomnav-item:hover { color: var(--text); } .bottomnav-item.is-active { color: var(--text); } .bottomnav-item.is-active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 2px; background: var(--accent); } .bottomnav-icon { font-family: var(--font-serif); font-size: 1rem; line-height: 1; color: inherit; } .bottomnav-item.is-active .bottomnav-icon { color: var(--accent); } .bottomnav-label { font-family: var(--font-mono); } /* ============ <=640px — phone-specific layout ============ */ @media (max-width: 640px) { /* Show bottom nav, hide topnav-tabs row */ .bottomnav { display: flex; } .topnav-tabs { display: none; } body { padding-bottom: 76px; } /* Compact masthead — single row stays as 1fr/auto/1fr grid; the auto (tabs) column collapses to 0 since topnav-tabs is hidden, leaving brand glued to the left edge and utility to the right edge. */ .topnav-row { padding: 0 1rem; height: 56px; } .brand-link { font-size: 1rem; } .brand-divider, .brand-env, .brand-edition { display: none; } .topnav-utility-link { display: none; } .topnav-utility { gap: .75rem; } .user-name { display: none; } /* Hit targets >=44px on every interactive element on phones. font-size: 16px on inputs/selects prevents iOS Safari from auto-zooming when the user focuses them — sub-16 triggers the zoom regardless of viewport meta. */ .btn, button, [role="button"], input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input:not([type]), select, textarea { min-height: 44px; } input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input:not([type]), select, textarea { font-size: 1rem; } /* user-btn = avatar tap target. 44×44 pill with 28px avatar centered. No border/background in mobile so it reads as a pure avatar control. */ .user-btn { min-height: 44px; min-width: 44px; padding: 0; gap: 0; border: none; background: transparent; justify-content: center; } .user-btn:hover { background: transparent; border: none; } .user-avatar { width: 28px; height: 28px; } /* Dropdown items: comfortable touch targets and consistent inset. */ .user-dropdown-item { min-height: 44px; padding: .9rem 1.1rem !important; } .user-dropdown { right: .5rem; max-width: calc(100vw - 1.5rem); padding: .5rem !important; } /* Stats strip → horizontal scroll on phone (Handoff §6) */ .stats-strip { display: flex !important; overflow-x: auto; gap: 0; margin: 1rem 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); -webkit-overflow-scrolling: touch; } .stat-cell { flex: 0 0 auto; min-width: 130px; padding: 0 1rem !important; border-bottom: none !important; border-left: 1px solid var(--border) !important; } .stat-cell:first-child { border-left: none !important; padding-left: 0 !important; } .stat-value { font-size: 1rem !important; } /* Page-header / section-title typography rescale */ .section-title-text { font-size: 1.25rem !important; letter-spacing: -0.02em; } .today-headline { font-size: 1.85rem; } .detail-title { font-size: 2.4rem; } .detail-price { font-size: 1.5rem; } /* Watchlist + activity log + symbol-index need slightly tighter padding */ .watch-card { padding: 1rem 1.1rem; } .activity-row { padding: .75rem 0; } .symbol-index-row { padding: 1rem 0; } /* Run cards: full-width buttons must be tall enough */ button.run-card-cta { min-height: 48px; } } /* ============ Session toggle (Fase 12 — /today/ filter) ============ */ .session-toggle { display: inline-flex; gap: .35rem; margin-top: .85rem; margin-bottom: 1rem; padding: .25rem; border-radius: 999px; background: var(--bg-elev-2); border: 1px solid var(--border); width: max-content; } .session-tab { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: .35rem .85rem; border-radius: 999px; color: var(--text-dim); text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .session-tab:hover { color: var(--text); } .session-tab-active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); } /* ============ Session badges (Fase 12 — multi-velas clave) ============ */ .session-badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .04em; border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text-dim); margin-left: .35rem; } .session-london_open { color: #a0c4ff; border-color: rgba(160, 196, 255, .35); } .session-ny_8am { color: var(--text); border-color: var(--accent-rule); background: color-mix(in srgb, var(--accent) 18%, transparent); } .session-ny_close { color: #ffb480; border-color: rgba(255, 180, 128, .35); } /* ============ Confluence + A+ alerts (Fase 11) ============ */ .confluence-section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); } .confluence-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; } .confluence-card, .aplus-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.4rem; } .confluence-bullish { border-left: 3px solid var(--bull); } .confluence-bearish { border-left: 3px solid var(--bear); } .confluence-mixed { border-left: 3px solid var(--text-mute); } .confluence-headline { margin: .35rem 0 1rem; font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; } .confluence-bar { display: flex; align-items: stretch; width: 100%; height: 28px; border-radius: 6px; overflow: hidden; margin-bottom: .65rem; background: var(--bg-elev-2); } .conf-seg { display: inline-flex; align-items: center; justify-content: center; color: var(--bg); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 0; } .conf-seg-bull { background: var(--bull); } .conf-seg-bear { background: var(--bear); } .conf-seg-neutral { background: var(--neutral); color: var(--bg); } .confluence-meta { font-size: .78rem; margin: 0; } .aplus-card { border-color: var(--accent-rule); } .aplus-headline { margin: .35rem 0 1rem; font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; color: var(--accent); } .aplus-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; } .aplus-row a { display: flex; align-items: baseline; gap: .85rem; padding: .55rem .75rem; border-radius: 6px; background: var(--bg-elev-2); text-decoration: none; color: var(--text); transition: background var(--dur-fast) var(--ease); } .aplus-row a:hover { background: color-mix(in srgb, var(--accent-dim) 30%, var(--bg-elev-2)); } .aplus-row .mono { font-weight: 600; min-width: 5rem; } .aplus-row .ed-italic { flex: 1; font-size: .9rem; } .aplus-conf { font-family: var(--font-mono); font-size: .72rem; color: var(--text); font-weight: 600; padding: .15rem .45rem; /* Fixed 18% accent fill so the chip remains legible under Bone (where --accent-dim sits at 6% white and disappears against bg-elev-2). */ background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid var(--accent-rule); border-radius: 999px; } .aplus-empty { font-size: .82rem; margin: 0; } /* ============ Paper account tile (Fase F — resumen en /today/) ============ */ .paper-tile { margin-top: 2.5rem; } .paper-tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; } .paper-tile-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: .85rem; padding-top: .85rem; border-top: 1px dotted var(--border-strong); font-size: .9rem; } .paper-tile-strip > div { min-width: 0; } .paper-tile-strip .ed-eyebrow { display: block; margin-bottom: .25rem; } @media (max-width: 640px) { .paper-tile-strip { grid-template-columns: 1fr 1fr; gap: .75rem; } } @media (max-width: 900px) { .confluence-grid { grid-template-columns: 1fr; } } /* ============ Pair signals (Fase 13 — divergencias correlacionadas) ============ */ .pair-signals-section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); } .pair-signals-section .section-title { margin: .35rem 0 .25rem; font-weight: 500; font-size: 1.1rem; letter-spacing: -0.02em; border-bottom: none; padding-bottom: 0; } .pair-signals-section .section-sub { font-size: .8rem; line-height: 1.5; margin: 0 0 1rem; max-width: 60ch; } .pair-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; } .pair-card { background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.15rem; } .pair-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: .75rem; margin-bottom: .85rem; } .pair-r { color: var(--accent); font-weight: 600; letter-spacing: .03em; } .pair-n { font-size: .72rem; } .pair-bodies { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-bottom: .75rem; } .pair-leg { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .65rem .5rem; border-radius: 6px; background: var(--bg-elev-2); text-decoration: none; color: var(--text); transition: background var(--dur-fast) var(--ease); } .pair-leg:hover { background: color-mix(in srgb, var(--accent-dim) 30%, var(--bg-elev-2)); } .pair-ticker { font-weight: 600; font-size: .9rem; } .pair-vs { font-family: var(--font-mono); color: var(--text-mute); font-size: 1.1rem; flex-shrink: 0; } .pair-meta { font-size: .78rem; margin: 0; } /* ============ Outcome panel (Fase 10 — analysis_detail) ============ */ .outcome-panel { border-color: var(--border); } .outcome-win { border-color: var(--bull-border); background: color-mix(in srgb, var(--bull-dim) 30%, var(--bg-elev)); } .outcome-loss { border-color: var(--bear-border); background: color-mix(in srgb, var(--bear-dim) 30%, var(--bg-elev)); } .outcome-no_fill, .outcome-open, .outcome-neutral { border-color: var(--border); background: var(--bg-elev); } /* ============ Wide-table responsive (mobile horizontal scroll) ============ Pattern: wrap a wide comparative table to keep all columns visible without collapsing into stacked cards (which would kill row-vs-row comparison). First column sticky so the row identifier (pattern name) stays visible while scrolling. Right-edge gradient fades when scrolled to the end as overflow affordance per `swipe-clarity` UX rule. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; /* iOS momentum */ /* Gradient hint at right edge — `local` background scrolls with content, so it disappears when the table reaches the end. */ background: linear-gradient(to left, var(--bg-elev) 0%, transparent 24px) right center / 24px 100% no-repeat local, transparent; margin-left: -1.15rem; /* bleed to panel edge so scroll feels natural */ margin-right: -1.15rem; padding-left: 1.15rem; padding-right: 1.15rem; } .table-scroll table { width: 100%; min-width: 540px; /* below this, scroll engages */ } .table-scroll th:first-child, .table-scroll td:first-child { position: sticky; left: 0; background: var(--bg-elev); /* must be opaque so scrolled cols don't bleed through */ z-index: 1; /* Subtle right border to visually separate sticky col from scrolling area */ box-shadow: 1px 0 0 var(--border); } .table-scroll thead th:first-child { background: var(--bg-elev-2); /* match the rest of the thead row */ z-index: 2; } /* Striped rows need their sticky cell to also alternate colors */ .table-scroll tbody tr:nth-child(even) td:first-child { background: var(--bg-elev-2); } /* Drift-flagged rows keep their bear-tinted background on the sticky col too */ .table-scroll tbody tr.row-drift td:first-child { background: color-mix(in srgb, var(--bear-dim) 50%, var(--bg-elev)); } /* ============ Hit-rate panel (Fase 10) ============ */ .hit-rate-section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); } .hit-rate-section .section-head { margin-bottom: 1rem; } .hit-rate-section .section-title { margin: .35rem 0 .25rem; font-weight: 500; font-size: 1.1rem; letter-spacing: -0.02em; border-bottom: none; padding-bottom: 0; } .hit-rate-section .section-sub { font-size: .8rem; line-height: 1.5; margin: 0 0 1rem; max-width: 60ch; } .hit-rate-table { font-size: .85rem; } .hit-rate-table tr.row-drift { background: color-mix(in srgb, var(--bear-dim) 50%, transparent); } .hit-rate-table tr.row-drift td:first-child { border-left: 3px solid var(--bear); padding-left: .65rem; } /* ============ Landing + Login (public, pre-auth chrome) ============ */ .landing-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); } .landing-nav { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--border); } .landing-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); text-decoration: none; font-family: var(--font-mono); font-size: .9rem; font-weight: 600; letter-spacing: -0.01em; } .landing-brand:hover { color: var(--accent); } .landing-mark .mark-bull { color: var(--bull); } .landing-mark .mark-bear { color: var(--bear); } .landing-nav-actions { display: inline-flex; gap: .5rem; align-items: center; } .landing-main { flex: 1; max-width: 880px; width: 100%; margin: 0 auto; padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem); display: flex; flex-direction: column; gap: clamp(2.5rem, 6vw, 4.5rem); } .landing-hero { text-align: left; max-width: 720px; } .landing-headline { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 1.25rem; color: var(--text); } .landing-headline::after { content: ""; display: block; width: 3rem; height: 3px; margin-top: 1.25rem; background: var(--accent); } .landing-sub { font-size: 1.125rem; line-height: 1.55; color: var(--text-dim); margin: 0 0 1.75rem; max-width: 56ch; } .landing-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.25rem; } .landing-feature { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.25rem; } .landing-feature h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.35rem; letter-spacing: -0.01em; margin: .35rem 0 .5rem; } .landing-feature p { margin: 0; font-size: .92rem; } .landing-feature-num { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; } .landing-public { border-top: 1px solid var(--border); padding-top: 2rem; } .landing-public-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .landing-public-title { font-family: var(--font-serif); font-weight: 400; font-size: 1.65rem; letter-spacing: -0.01em; margin: 0; } .landing-public-table th { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); font-weight: 500; } .landing-public-empty { padding: 1.5rem 0; } .landing-public-note { margin-top: .75rem; } .landing-cta { text-align: center; padding: 1rem 0 0; } .landing-footer { border-top: 1px solid var(--border); padding: 1.25rem clamp(1rem, 4vw, 2.5rem); text-align: center; } .landing-footer a { color: var(--text-dim); text-decoration: underline; text-decoration-color: var(--border-strong); } .landing-footer a:hover { color: var(--accent); text-decoration-color: var(--accent); } /* --- Botones reutilizables (landing + login) --- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--accent); color: var(--bg); border: 1px solid var(--accent); border-radius: var(--radius-md); padding: .55rem 1rem; font-family: var(--font-sans); font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .btn-primary:hover { background: var(--accent-bright); } .btn-primary:active { transform: translateY(1px); } .btn-primary:focus-visible { outline: none; box-shadow: var(--accent-glow); } .btn-lg { padding: .75rem 1.5rem; font-size: 1rem; } .btn-block { width: 100%; } /* --- Login --- */ .login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 8vw, 5rem) 1rem; } .login-card { width: 100%; max-width: 380px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.25rem); } .login-title { font-family: var(--font-serif); font-weight: 400; font-size: 1.85rem; letter-spacing: -0.01em; margin: 0 0 .35rem; } .login-sub { margin: 0 0 1.5rem; font-size: .92rem; } .login-form { display: flex; flex-direction: column; gap: 1rem; } .login-field { display: flex; flex-direction: column; gap: .35rem; } .login-label { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); } .login-field input { background: var(--bg-elev-2); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--radius-sm); padding: .65rem .75rem; font: inherit; } .login-field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--accent-glow); } .login-field input[aria-invalid="true"] { border-color: var(--bear); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bear) 20%, transparent); } .login-field-error { font-size: .8rem; color: var(--bear); } .login-error { background: var(--bear-dim); border: 1px solid color-mix(in srgb, var(--bear) 35%, transparent); color: var(--bear); padding: .55rem .75rem; border-radius: var(--radius-sm); font-size: .88rem; } /* ============ Reduced motion ============ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } main.container { animation: none !important; } }