/* ============================================================ MECSA DESIGN TOKENS — fuente canónica ------------------------------------------------------------ Estas variables son las que usan HOY en producción las apps internas (Proyectos, OPS, RH, MecsaDocs, SICOP, Pulpería) y son la base del tema claro/oscuro. Uso en una app nueva: Regla: NUNCA escribas un color a mano en un componente. Siempre var(--token). Así el modo oscuro sale gratis. Marca: #013483 navy · #F29C2E / #f7941d ámbar · #112542 tinta Fuente de verdad original: GrupoMecsaProyectos/styles/main-proyectos.css ============================================================ */ /* ---------- Marca (no cambian con el tema) ---------- */ :root { --gm-navy: #013483; --gm-navy-dark: #112542; --gm-navy-light: #13438B; --gm-amber: #F29C2E; --gm-amber-alt: #f7941d; --gm-success: #198754; --gm-danger: #dc3545; --gm-warning: #ffc107; --gm-info: #0dcaf0; --gm-font: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* Espaciado (múltiplos de 4px) */ --gm-space-xs: .25rem; --gm-space-sm: .5rem; --gm-space-md: 1rem; --gm-space-lg: 1.5rem; --gm-space-xl: 2rem; --gm-space-xxl: 3rem; /* Radios y sombras */ --gm-radius-sm: 8px; --gm-radius-md: 12px; --gm-radius-lg: 16px; --gm-radius-pill: 999px; } :root, :root[data-theme=light] { --bg-app: #f8f9fa; --bg-surface: #ffffff; --bg-surface-2: #f8f9fa; --bg-surface-3: #f3f4f6; --border: #eaeaea; --border-soft: #f3f4f6; --text: #111827; --text-2: #4b5563; --text-muted: #9ca3af; --brand: #013483; --brand-contrast:#ffffff; --accent: #f7941d; --sidebar-from: #ffffff; --sidebar-to: #ffffff; --sidebar-text: #6b7280; --sidebar-text-hover: #111827; --sidebar-text-active: #013483; --sidebar-name: #111827; --sidebar-group-text: #b0b7c3; --sidebar-hover-bg: #f3f4f6; --sidebar-active-bg: rgba(1, 52, 131, 0.1); --sidebar-border: #eaeaea; --sidebar-logo-bg: transparent; --sidebar-newbtn-text: #013483; --sidebar-newbtn-border: rgba(1, 52, 131, 0.30); --topbar-from: #ffffff; --topbar-to: #f6f8fc; --topbar-border: #e8ecf3; --shadow: rgba(0, 0, 0, .07); --shadow-strong: rgba(0, 0, 0, .12); --input-bg: #f8f9fa; --input-border: #eaeaea; --scroll-thumb: #d4d8e0; --scroll-thumb-hover: #9ca3af; color-scheme: light; } :root[data-theme=dark] { --bg-app: #0b1120; --bg-surface: #131c2e; --bg-surface-2: #1a2436; --bg-surface-3: #212c40; --border: #263248; --border-soft: #1e2839; --text: #e8edf7; --text-2: #b6c2d6; --text-muted: #7f8ea8; --brand: #5b8def; --brand-contrast:#0b1120; --accent: #f7941d; --sidebar-from: #0d1526; --sidebar-to: #070d1a; --sidebar-text: #c3d0e6; --sidebar-text-hover: #ffffff; --sidebar-text-active: #ffffff; --sidebar-name: #ffffff; --sidebar-group-text: #8ba0c4; --sidebar-hover-bg: rgba(255, 255, 255, 0.07); --sidebar-active-bg: rgba(255, 255, 255, 0.13); --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-logo-bg: #ffffff; --sidebar-newbtn-text: #dbe4f2; --sidebar-newbtn-border: rgba(255, 255, 255, 0.28); --topbar-from: #131c2e; --topbar-to: #0f1726; --topbar-border: #263248; --shadow: rgba(0, 0, 0, .45); --shadow-strong: rgba(0, 0, 0, .6); --input-bg: #1a2436; --input-border: #2c3a52; --scroll-thumb: #2e3a52; --scroll-thumb-hover: #46587d; color-scheme: dark; --bs-body-bg: #131c2e; --bs-body-color: #e8edf7; --bs-emphasis-color: #e8edf7; --bs-secondary-color: #b6c2d6; --bs-tertiary-color: #7f8ea8; --bs-secondary-bg: #1a2436; --bs-tertiary-bg: #212c40; --bs-border-color: #263248; --bs-heading-color: #e8edf7; --bs-link-color: #5b8def; --bs-link-hover-color: #7ba4f4; --bs-code-color: #f0a4c8; }