/* ========================================================= Helix · Design Tokens "Confident + magnetic + toque Apple. Limpio, nítido, perfecto." Monochrome graphite + Apple system blue. Light + Dark. ========================================================= */ /* Inter (Google Fonts) se carga vía con preconnect en el del shell (agent/dashboard.py) — el @import aquí encadenaba la descarga al parseo del CSS. */ @font-face { font-family: 'Inter Local'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/dashboard/fonts/Inter-Regular.woff2') format('woff2'); } @font-face { font-family: 'Inter Local'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/dashboard/fonts/Inter-Medium.woff2') format('woff2'); } /* ========================================================= :root — LIGHT (default) ========================================================= */ :root { /* ---------- Backgrounds ---------- */ --bg-page: #FAFAFA; --bg-elevated: #FFFFFF; --bg-sunken: #F5F5F7; /* ---------- Text ---------- */ --text-1: #0A0A0A; --text-2: #525252; --text-3: #727278; /* ---------- Borders ---------- */ --border-1: #E5E5E7; --border-2: #EFEFF3; /* ---------- Accent (Apple system blue — the ONLY color of the system) ---------- */ --accent: #007AFF; --accent-hover: #0066D6; --accent-bg: rgba(0, 122, 255, 0.08); --accent-ring: rgba(0, 122, 255, 0.35); /* ---------- Semantic ---------- */ --success: var(--grad-signal); --success-solid: #FF6B35; --warning: #FF9F0A; --danger: #FF3B30; /* Feedback de sistema y deltas de dataviz — nunca decorativo. Variantes -text pasan AA sobre bg-page; -bg son tintes para pills/estados. */ --positive: #1F7A3F; --positive-bg: rgba(31, 122, 63, 0.12); --warning-text: #8A5A00; --warning-bg: rgba(255, 159, 10, 0.15); --danger-bg: rgba(255, 59, 48, 0.10); /* ---------- Heat states (lead temperature) ---------- */ --heat-frio: #8E8E93; --heat-tibio: #FF9F0A; --heat-caliente: #FF6B35; --heat-listo: #FF3B30; --heat-cliente: var(--grad-signal); --heat-cliente-solid: #FF6B35; /* Tinte + texto AA por heat (pill del header del lead) */ --heat-frio-bg: rgba(142, 142, 147, 0.14); --heat-frio-text: #55555A; --heat-tibio-bg: rgba(255, 159, 10, 0.16); --heat-tibio-text: #8A5A00; --heat-caliente-bg: rgba(255, 107, 53, 0.14); --heat-caliente-text:#A83A10; --heat-listo-bg: rgba(255, 59, 48, 0.12); --heat-listo-text: #B3261E; /* ---------- Identificación de canal (solo el glifo del logo, nunca texto) ---------- */ --canal-wa: #25D366; --canal-ig: #C13584; /* ---------- Dataviz ---------- */ --chart-leads: #A1A1AA; --chart-agendados: #FF6B35; --chart-revenue: var(--positive); /* ---------- Avatares monograma ---------- */ --avatar-bg-1: #EAEAEC; --avatar-bg-2: #E5E5E7; --avatar-bg-3: #E0E0E3; --avatar-bg-4: #ECECEF; --avatar-fg: #525252; /* ---------- Scrim (bottom sheets) ---------- */ --scrim: rgba(0, 0, 0, 0.32); /* ---------- Spacing (8px grid) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; /* ---------- Radii ---------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px; /* ---------- Shadows ---------- */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.08); /* ---------- Type families ---------- */ --font-sans: 'Inter', 'Inter Local', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- Density (Default mode) ---------- */ --row-h: 44px; --row-px: 12px; /* ---------- Signature gradient ---------- */ --grad-signal: linear-gradient(135deg, #007AFF 0%, #B84BFF 30%, #FF6B35 65%, #FF3B30 100%); --grad-signal-soft: linear-gradient(135deg, rgba(0,122,255,0.18) 0%, rgba(184,75,255,0.16) 30%, rgba(255,107,53,0.16) 65%, rgba(255,59,48,0.14) 100%); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; } /* Density variants */ [data-density="comfortable"] { --row-h: 56px; --row-px: 16px; } [data-density="default"] { --row-h: 44px; --row-px: 12px; } [data-density="compact"] { --row-h: 32px; --row-px: 8px; } /* ========================================================= :root — DARK ========================================================= */ [data-theme="dark"] { --bg-page: #0A0A0B; --bg-elevated: #18181B; --bg-sunken: #050506; --text-1: #FAFAFA; --text-2: #A1A1AA; --text-3: #71717A; --border-1: #27272A; --border-2: #18181B; --accent: #0A84FF; --accent-hover: #339CFF; --accent-bg: rgba(10, 132, 255, 0.12); --accent-ring: rgba(10, 132, 255, 0.45); --success: var(--grad-signal); --success-solid: #FF8245; --warning: #FFD60A; --danger: #FF453A; --positive: #4ADE80; --positive-bg: rgba(74, 222, 128, 0.14); --warning-text: #FFD60A; --warning-bg: rgba(255, 214, 10, 0.12); --danger-bg: rgba(255, 69, 58, 0.14); --heat-frio: #71717A; --heat-tibio: #FFD60A; --heat-caliente: #FF8245; --heat-listo: #FF453A; --heat-cliente: var(--grad-signal); --heat-cliente-solid: #FF8245; --heat-frio-bg: rgba(113, 113, 122, 0.24); --heat-frio-text: #A1A1AA; --heat-tibio-bg: rgba(255, 214, 10, 0.14); --heat-tibio-text: #FFD60A; --heat-caliente-bg: rgba(255, 130, 69, 0.16); --heat-caliente-text:#FF8245; --heat-listo-bg: rgba(255, 69, 58, 0.16); --heat-listo-text: #FF7A72; --canal-wa: #2FD873; --canal-ig: #E1559B; --chart-leads: #A1A1AA; --chart-agendados: #FF8245; --chart-revenue: var(--positive); --avatar-bg-1: #26262B; --avatar-bg-2: #2A2A30; --avatar-bg-3: #232328; --avatar-bg-4: #2E2E34; --avatar-fg: #C9C9CE; --scrim: rgba(0, 0, 0, 0.6); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6); } /* ========================================================= Base elements — el bg-page se aplica también a html/body para que los gutters del navegador (scrollbars, márgenes nativos) no se vean blancos en dark mode. ========================================================= */ html, body { margin: 0; padding: 0; background: var(--bg-page); color: var(--text-1); min-height: 100vh; } html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } .helix-app { background: var(--bg-page); color: var(--text-1); font-family: var(--font-sans); font-weight: 400; font-feature-settings: "cv11", "ss01", "ss03"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.011em; min-height: 100vh; } /* ========================================================= Type scale ========================================================= */ .helix-app .t-display-xl { font-size: 56px; line-height: 1.04; letter-spacing: -0.025em; font-weight: 600; } .helix-app .t-display-l { font-size: 40px; line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; } .helix-app .t-display-m { font-size: 32px; line-height: 1.12; letter-spacing: -0.018em; font-weight: 600; } .helix-app h1, .helix-app .t-h1 { font-size: 28px; line-height: 1.18; letter-spacing: -0.015em; font-weight: 600; color: var(--text-1); margin: 0; } .helix-app h2, .helix-app .t-h2 { font-size: 22px; line-height: 1.22; letter-spacing: -0.012em; font-weight: 600; color: var(--text-1); margin: 0; } .helix-app h3, .helix-app .t-h3 { font-size: 17px; line-height: 1.3; letter-spacing: -0.008em; font-weight: 600; color: var(--text-1); margin: 0; } .helix-app h4, .helix-app .t-h4 { font-size: 15px; line-height: 1.35; letter-spacing: -0.005em; font-weight: 600; color: var(--text-1); margin: 0; } .helix-app .t-body-l { font-size: 17px; line-height: 1.5; letter-spacing: -0.005em; font-weight: 400; } .helix-app .t-body { font-size: 15px; line-height: 1.47; letter-spacing: -0.003em; font-weight: 400; } .helix-app .t-body-s { font-size: 13px; line-height: 1.45; letter-spacing: 0; font-weight: 400; } .helix-app .t-caption { font-size: 12px; line-height: 1.4; letter-spacing: 0; font-weight: 500; color: var(--text-3); } .helix-app .t-eyebrow { font-size: 11px; line-height: 1.3; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; color: var(--text-3); } .helix-app .t-tnum { font-variant-numeric: tabular-nums; } .helix-app .fg-1 { color: var(--text-1); } .helix-app .fg-2 { color: var(--text-2); } .helix-app .fg-3 { color: var(--text-3); } .helix-app .fg-accent { color: var(--accent); } /* ========================================================= Hairline rule ========================================================= */ .helix-app hr, .helix-app .rule { border: none; border-top: 1px solid var(--border-1); margin: var(--s-6) 0; } /* ========================================================= Focus rings ========================================================= */ .helix-app *:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: 4px; } /* ========================================================= Signal border — rotating gradient comet around hero widgets. Use sparingly: hero KPI cards, Today widget. Max 2 per screen. ========================================================= */ .helix-app .signal-border { position: relative; border-radius: var(--r-lg); isolation: isolate; overflow: hidden; background: var(--bg-elevated); } .helix-app .signal-border::before { content: ''; position: absolute; top: 50%; left: 50%; width: 240%; aspect-ratio: 1; transform: translate(-50%, -50%); background: conic-gradient( from 0deg, transparent 0deg, transparent 190deg, rgba(0, 122, 255, 0.0) 200deg, rgba(0, 122, 255, 0.95) 220deg, rgba(184, 75, 255, 1) 240deg, rgba(255, 107, 53, 1) 260deg, rgba(255, 59, 48, 0.95) 275deg, transparent 295deg, transparent 360deg ); animation: signal-orbit 5s linear infinite; z-index: 0; pointer-events: none; } .helix-app .signal-border::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-signal-soft); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 0; pointer-events: none; } .helix-app .signal-border-inner { position: relative; z-index: 1; background: var(--bg-elevated); border-radius: calc(var(--r-lg) - 1.5px); margin: 1.5px; } @keyframes signal-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .helix-app .signal-border::before { animation: none; opacity: 0.55; } } .helix-app[data-theme="dark"] .signal-border::before { filter: brightness(1.15); } /* ========================================================= Brand mark — el logo Helix llevando el comet de señal. Identidad permanente: la firma de gradiente siempre visible, sin reintroducir el card de stats. Vive en sidebar + header móvil. ========================================================= */ .helix-app .helix-brand-mark { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; isolation: isolate; overflow: hidden; flex-shrink: 0; color: var(--text-1); /* Anillo de gradiente SIEMPRE visible (no solo el arco del comet), para que la firma se perciba también en móvil/PWA. */ background: var(--grad-signal); } .helix-app .helix-brand-mark::before { content: ''; position: absolute; top: 50%; left: 50%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%); background: conic-gradient( from 0deg, transparent 0deg, transparent 205deg, rgba(0, 122, 255, 0.0) 212deg, rgba(0, 122, 255, 0.95) 230deg, rgba(184, 75, 255, 1) 250deg, rgba(255, 107, 53, 1) 270deg, rgba(255, 59, 48, 0.95) 286deg, transparent 302deg, transparent 360deg ); animation: signal-orbit 5.5s linear infinite; z-index: 0; pointer-events: none; } .helix-app .helix-brand-mark::after { /* relleno interior: deja ver ~2px de anillo (gradiente + comet) */ content: ''; position: absolute; inset: 2px; border-radius: 8px; background: var(--bg-elevated); z-index: 1; } .helix-app .helix-brand-mark svg { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { .helix-app .helix-brand-mark::before { animation: none; opacity: 0.7; } } .helix-app[data-theme="dark"] .helix-brand-mark::before { filter: brightness(1.2); } /* Cierre: el dot del lead 'cliente' usa el gradiente de señal; un glow suave hace que un deal cerrado destaque a simple vista en la bandeja. */ .helix-app .helix-heat-dot--signal { box-shadow: 0 0 0 1.5px var(--bg-page), 0 0 9px rgba(184, 75, 255, 0.55); }