/* ============================================================================ LEAD GAME · UI SYSTEM v1.0 Sistema de diseño unificado para dashboards, apps y contenido. Marca: Primary #CCFF00 · Secondary #121417 · Tipografía Montserrat Prefijo: todo va con `lg-` para no chocar con el CSS de GHL / embudos. USO --- 1. En el : Respaldo si Google Fonts está bloqueado (misma familia, desde jsDelivr): https://cdn.jsdelivr.net/npm/@fontsource/montserrat@5/{400,500,600,700,800}.css 2. Tema: (por defecto) · "dark" · "light" Sin atributo respeta la preferencia del sistema operativo. 3. Assets de marca — ver LEADGAME-UI.md, sección "Assets públicos". ============================================================================ */ /* --------------------------------------------------------------------------- 1. PRIMITIVAS — la paleta cruda. No las uses directo en componentes. --------------------------------------------------------------------------- */ :root { /* Rampa Lime — derivada del #CCFF00 de marca */ --lg-lime-50: #FAFFE5; --lg-lime-100: #F2FFB8; --lg-lime-200: #E8FF80; --lg-lime-300: #DDFF47; --lg-lime-400: #CCFF00; /* ← Primary de marca */ --lg-lime-500: #B8E600; --lg-lime-600: #9CC400; --lg-lime-700: #7A9A00; --lg-lime-800: #5C7300; /* ← texto lime legible sobre blanco */ --lg-lime-900: #465800; --lg-lime-950: #283300; /* Rampa Ink — neutros fríos derivados del #121417 */ --lg-ink-0: #FFFFFF; --lg-ink-25: #FAFBFB; --lg-ink-50: #F4F6F6; --lg-ink-100: #E8EBEB; --lg-ink-200: #D3D8D9; --lg-ink-300: #B0B7B9; --lg-ink-400: #858E91; --lg-ink-500: #626B6E; --lg-ink-600: #4A5255; --lg-ink-700: #363D40; --lg-ink-800: #22282B; --lg-ink-900: #181C1F; --lg-ink-950: #121417; /* ← Secondary de marca */ --lg-ink-1000: #0B0D0F; /* Tipografía */ --lg-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Mono cargada como webfont: si dependes de las del sistema, el bloque de código se ve distinto en cada máquina del equipo (y en Windows suele caer en Courier New, que no combina con Montserrat). */ --lg-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace; /* Escala tipográfica (base 16px, ratio 1.25) */ --lg-text-2xs: 0.6875rem; /* 11px · etiquetas, badges */ --lg-text-xs: 0.75rem; /* 12px · captions, tabla header */ --lg-text-sm: 0.875rem; /* 14px · UI por defecto */ --lg-text-md: 1rem; /* 16px · cuerpo de texto */ --lg-text-lg: 1.125rem; /* 18px */ --lg-text-xl: 1.375rem; /* 22px · título de card */ --lg-text-2xl: 1.75rem; /* 28px · título de sección */ --lg-text-3xl: 2.25rem; /* 36px · KPI grande */ --lg-text-4xl: 3rem; /* 48px · hero */ --lg-weight-normal: 400; --lg-weight-medium: 500; --lg-weight-semi: 600; --lg-weight-bold: 700; --lg-weight-black: 800; --lg-leading-tight: 1.15; --lg-leading-snug: 1.35; --lg-leading-normal:1.6; /* Espaciado (base 4px) */ --lg-sp-1: 0.25rem; --lg-sp-2: 0.5rem; --lg-sp-3: 0.75rem; --lg-sp-4: 1rem; --lg-sp-5: 1.25rem; --lg-sp-6: 1.5rem; --lg-sp-8: 2rem; --lg-sp-10: 2.5rem; --lg-sp-12: 3rem; --lg-sp-16: 4rem; /* Radios */ --lg-radius-sm: 6px; --lg-radius-md: 10px; --lg-radius-lg: 16px; --lg-radius-xl: 22px; --lg-radius-full: 999px; /* Transiciones */ --lg-ease: cubic-bezier(.4, 0, .2, 1); --lg-fast: 140ms var(--lg-ease); --lg-base: 220ms var(--lg-ease); /* Layout */ --lg-sidebar-w: 248px; --lg-topbar-h: 64px; --lg-container: 1440px; } /* --------------------------------------------------------------------------- 2. TOKENS SEMÁNTICOS — LIGHT (por defecto) Estos SÍ se usan en los componentes. --------------------------------------------------------------------------- */ :root, [data-theme="light"] { color-scheme: light; /* Superficies */ --lg-bg: var(--lg-ink-50); --lg-surface: var(--lg-ink-0); --lg-surface-2: var(--lg-ink-25); --lg-surface-3: var(--lg-ink-100); --lg-surface-inv: var(--lg-ink-950); /* Bordes */ --lg-border: var(--lg-ink-100); --lg-border-strong: var(--lg-ink-200); /* Texto */ --lg-fg: var(--lg-ink-950); --lg-fg-muted: var(--lg-ink-500); --lg-fg-subtle: var(--lg-ink-400); --lg-fg-inv: var(--lg-ink-0); /* Acento */ /* Acento — sobre fondo claro el #CCFF00 NO se lee (1,18:1). Se oscurece según el tamaño de lo que pintes. Ver tabla abajo. */ --lg-accent: var(--lg-lime-400); /* SOLO como fondo, con texto oscuro encima */ --lg-accent-hover: var(--lg-lime-500); --lg-on-accent: var(--lg-ink-950); /* texto SOBRE el acento */ --lg-accent-graphic: var(--lg-lime-600); /* logo, iconos y formas grandes · 2,0:1 */ --lg-accent-ui: var(--lg-lime-700); /* bordes, iconos UI, titulares 24px+ · 3,3:1 */ --lg-accent-ink: var(--lg-lime-800); /* texto normal y links · 5,4:1 (AA) */ --lg-accent-soft: var(--lg-lime-100); /* fondo suave de chips */ --lg-accent-line: var(--lg-lime-600); /* trazos de gráficas */ --lg-accent-glow: rgba(204, 255, 0, .30); /* CONTRASTE DE LA RAMPA (medido) token hex sobre blanco sobre #121417 lime-400 #CCFF00 1,18 15,70 lime-500 #B8E600 1,46 12,61 lime-600 #9CC400 2,04 9,06 lime-700 #7A9A00 3,26 5,67 lime-800 #5C7300 5,37 3,43 Mínimos WCAG: texto normal 4,5:1 · texto 24px+ o bold 18px+ 3:1 · bordes/iconos 3:1 */ /* Estados */ --lg-success: #16A34A; --lg-success-soft: #DCFCE7; --lg-warning: #D97706; --lg-warning-soft: #FEF3C7; --lg-danger: #DC2626; --lg-danger-soft: #FEE2E2; --lg-info: #0F766E; --lg-info-soft: #CCFBF1; /* Sombras (en light sí pesan) */ --lg-shadow-sm: 0 1px 2px rgba(18, 20, 23, .06); --lg-shadow-md: 0 4px 14px rgba(18, 20, 23, .08); --lg-shadow-lg: 0 12px 32px rgba(18, 20, 23, .10); /* Paleta de gráficas */ /* CATEGÓRICA — series sin orden entre sí (varias líneas, varias fuentes). La escala tonal de verde sirve para datos ORDENADOS (rankings, composiciones); para categorías se confunden y hacen falta tonos distintos. Estos cuatro primeros son los seguros. */ --lg-chart-1: #5C7300; /* oliva */ --lg-chart-2: #0F766E; /* teal */ --lg-chart-3: #B45309; /* ámbar */ --lg-chart-4: #C2410C; /* coral */ --lg-chart-5: #5C6B6C; /* gris verdoso */ --lg-chart-6: #9CC400; /* lime medio */ } /* --------------------------------------------------------------------------- 3. TOKENS SEMÁNTICOS — DARK --------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --lg-bg: var(--lg-ink-1000); --lg-surface: var(--lg-ink-950); --lg-surface-2: var(--lg-ink-900); --lg-surface-3: var(--lg-ink-800); --lg-surface-inv: var(--lg-ink-0); --lg-border: rgba(255, 255, 255, .08); --lg-border-strong: rgba(255, 255, 255, .16); --lg-fg: #E9ECEC; --lg-fg-muted: var(--lg-ink-400); --lg-fg-subtle: var(--lg-ink-500); --lg-fg-inv: var(--lg-ink-950); /* En dark se invierte: el lime puro es el que mejor contrasta (15,7:1) */ --lg-accent: var(--lg-lime-400); --lg-accent-hover: var(--lg-lime-300); --lg-on-accent: var(--lg-ink-950); --lg-accent-graphic: var(--lg-lime-400); --lg-accent-ui: var(--lg-lime-400); --lg-accent-ink: var(--lg-lime-300); /* en dark el texto lime sí brilla */ --lg-accent-soft: rgba(204, 255, 0, .12); --lg-accent-line: var(--lg-lime-400); --lg-accent-glow: rgba(204, 255, 0, .38); --lg-success: #4ADE80; --lg-success-soft: rgba(74, 222, 128, .13); --lg-warning: #FBBF24; --lg-warning-soft: rgba(251, 191, 36, .13); --lg-danger: #F87171; --lg-danger-soft: rgba(248, 113, 113, .13); --lg-info: #4FE3C1; --lg-info-soft: rgba(79, 227, 193, .13); /* En dark la sombra no se ve: el volumen lo dan bordes y glow */ --lg-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --lg-shadow-md: 0 6px 20px rgba(0, 0, 0, .45); --lg-shadow-lg: 0 16px 44px rgba(0, 0, 0, .55); --lg-chart-1: #CCFF00; /* lime */ --lg-chart-2: #4FE3C1; /* turquesa */ --lg-chart-3: #FBBF24; /* ámbar */ --lg-chart-4: #FF9178; /* coral */ --lg-chart-5: #9FC0C1; /* gris verdoso */ --lg-chart-6: #7A9A00; /* oliva */ } /* Sin data-theme: sigue al sistema */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --lg-bg: var(--lg-ink-1000); --lg-surface: var(--lg-ink-950); --lg-surface-2: var(--lg-ink-900); --lg-surface-3: var(--lg-ink-800); --lg-surface-inv: var(--lg-ink-0); --lg-border: rgba(255,255,255,.08); --lg-border-strong: rgba(255,255,255,.16); --lg-fg: #E9ECEC; --lg-fg-muted: var(--lg-ink-400); --lg-fg-subtle: var(--lg-ink-500); --lg-fg-inv: var(--lg-ink-950); --lg-accent-hover: var(--lg-lime-300); --lg-accent-graphic: var(--lg-lime-400); --lg-accent-ui: var(--lg-lime-400); --lg-accent-ink: var(--lg-lime-300); --lg-accent-soft: rgba(204,255,0,.12); --lg-accent-line: var(--lg-lime-400); --lg-accent-glow: rgba(204,255,0,.38); --lg-success: #4ADE80; --lg-success-soft: rgba(74,222,128,.13); --lg-warning: #FBBF24; --lg-warning-soft: rgba(251,191,36,.13); --lg-danger: #F87171; --lg-danger-soft: rgba(248,113,113,.13); --lg-info: #4FE3C1; --lg-info-soft: rgba(79,227,193,.13); --lg-shadow-sm: 0 1px 2px rgba(0,0,0,.40); --lg-shadow-md: 0 6px 20px rgba(0,0,0,.45); --lg-shadow-lg: 0 16px 44px rgba(0,0,0,.55); --lg-chart-1: #CCFF00; --lg-chart-2: #4FE3C1; --lg-chart-3: #FBBF24; --lg-chart-4: #FF9178; --lg-chart-5: #9FC0C1; --lg-chart-6: #7A9A00; } } /* --------------------------------------------------------------------------- 3b. TOKENS SEMÁNTICOS — GAME (tema por defecto · el verde petróleo de la app) Colores muestreados de la app real: sidebar #093F41 · glow del login #08383A · borde del login #031516 Los grises van teñidos de teal y más claros que en el tema neutro: el #858E91 estándar da 3,5:1 sobre el sidebar y ahí es donde el texto "desaparece". Estos pasan AA. --------------------------------------------------------------------------- */ [data-theme="game"] { color-scheme: dark; /* Rampa petróleo */ --lg-teal-950: #031314; /* fondo de página */ --lg-teal-900: #041B1C; /* hover */ --lg-teal-850: #062426; /* cards y sidebar */ --lg-teal-800: #0A3335; /* rieles y tracks */ --lg-teal-750: #08383A; /* centro del glow del login */ --lg-teal-700: #093F41; /* acento puntual — el petróleo de la app */ --lg-teal-600: #0C5052; --lg-teal-500: #106366; --lg-teal-400: #157C80; --lg-teal-300: #3E9EA1; /* Domina el verde oscuro. El petróleo saturado (#093F41) queda reservado para elementos puntuales, no para superficies grandes. */ --lg-bg: var(--lg-teal-950); /* #031314 · casi negro verdoso */ --lg-surface: var(--lg-teal-850); /* #062426 · cards y sidebar */ --lg-surface-2: var(--lg-teal-900); /* #041B1C · hover, más oscuro */ --lg-surface-3: var(--lg-teal-800); /* #0A3335 · rieles, un paso más claro */ --lg-surface-hi: var(--lg-teal-700); /* #093F41 · acentos puntuales */ --lg-surface-inv: #EAF1F1; --lg-border: rgba(255, 255, 255, .09); --lg-border-strong: rgba(255, 255, 255, .19); --lg-fg: #EAF1F1; /* 10,2:1 sobre el sidebar */ --lg-fg-muted: #9FC0C1; /* 6,0:1 — el que arregla los placeholders */ --lg-fg-subtle: #7FA6A8; /* 4,4:1 — mínimo para texto secundario */ --lg-fg-inv: var(--lg-teal-900); --lg-accent: var(--lg-lime-400); --lg-accent-hover: var(--lg-lime-300); --lg-on-accent: #052223; --lg-accent-graphic: var(--lg-lime-400); --lg-accent-ui: var(--lg-lime-400); --lg-accent-ink: var(--lg-lime-300); --lg-accent-soft: rgba(204, 255, 0, .13); --lg-accent-line: var(--lg-lime-400); --lg-accent-glow: rgba(204, 255, 0, .34); --lg-success: #5BE49B; --lg-success-soft: rgba(91, 228, 155, .14); --lg-warning: #FBBF24; --lg-warning-soft: rgba(251, 191, 36, .14); --lg-danger: #FF8A8A; --lg-danger-soft: rgba(255, 138, 138, .14); --lg-info: #4FE3C1; --lg-info-soft: rgba(79, 227, 193, .14); --lg-shadow-sm: 0 1px 2px rgba(0, 12, 12, .45); --lg-shadow-md: 0 6px 22px rgba(0, 12, 12, .50); --lg-shadow-lg: 0 18px 48px rgba(0, 12, 12, .60); --lg-chart-1: #CCFF00; /* lime */ --lg-chart-2: #4FE3C1; /* turquesa */ --lg-chart-3: #FBBF24; /* ámbar */ --lg-chart-4: #FF9178; /* coral */ --lg-chart-5: #9FC0C1; /* gris verdoso */ --lg-chart-6: #7A9A00; /* oliva */ } /* Fondos con degradado — el glow radial del login de la app. Va en el o en una sección completa, nunca dentro de una card: dos degradados anidados se pelean y ensucian el foco. */ .lg-glow { background: radial-gradient(ellipse 90% 70% at 50% 25%, #0A2F31 0%, #051D1E 45%, #020E0F 100%); background-attachment: fixed; } [data-theme="dark"] .lg-glow { background: radial-gradient(ellipse 90% 70% at 50% 30%, #1A1D1F 0%, #0E1011 48%, #070808 100%); background-attachment: fixed; } [data-theme="light"] .lg-glow { background: radial-gradient(ellipse 90% 70% at 50% 30%, #FFFFFF 0%, #F4F6F6 55%, #E8EBEB 100%); background-attachment: fixed; } /* Borde superior lime en cards sobre fondo teal — separa sin agregar líneas */ .lg-card--edge { position: relative; overflow: hidden; } .lg-card--edge::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--lg-accent), transparent 70%); } /* --------------------------------------------------------------------------- 4. RESET Y BASE --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Red de seguridad: si algún control nativo se escapa del sistema, al menos usa el lime y no el azul por defecto del navegador. */ :root { accent-color: var(--lg-accent); } /* El atributo `hidden` vale 0-1-0 igual que una clase, así que cualquier componente con `display:flex` lo anula sin querer. Esto lo blinda. */ [hidden] { display: none !important; } /* Los controles de formulario NO heredan font-family del padre: el navegador les impone la suya. Sin esta línea, cualquier