/* ============================================================================== CRM-GREU — Shared CSS Variables Cross-panel centralized palette and design tokens ============================================================================== */ :root { /* --- Colors ---------------------------------------------------------------- */ --color-bg: #f5f3f0; /* --color-bg: linear-gradient(180deg, #f5f3f0 55%, #ebddc7 85%); */ /* NOTE: no podemos usar --color-bg en modo gradiente porque afecta a más elementos */ /* --color-surface: #fffaf2; */ --color-surface: #fdfdfd; --color-surface-strong: #ffffff; --color-surface-sheer: #ffffff8a; /* --color-sidebar: #e7e3d7; --color-sidebar: #ffeaac; */ --color-sidebar: linear-gradient(90deg, #fff3cf, #e6c973); --color-sidebar-border: #FFFFFF; --color-border: #dfcfb9; --color-border-soft: #eadfce; --color-primary: #071b35; --color-primary-soft: #0d315e; --color-accent: #d8a62a; --color-accent-soft: #fff1d0; --color-success: #2c7a55; --color-success-bg: #f0fdf4; --color-success-border: #bbf7d0; --color-danger: #c0443e; --color-danger-bg: #fff5f5; --color-danger-border: #f6c6c6; --color-warning: #d8a62a; --color-warning-bg: #fff4d8; --color-warning-border: #f2d391; --color-info: #31688b; --color-info-bg: #99cae9; --color-info-border: #31688b; --color-text: #071426; --color-muted: #667085; --color-text-muted: var(--color-muted); --color-text-secondary: var(--color-muted); --color-bg-subtle: #f1f1f0; /* --- Typography ------------------------------------------------------------ */ --font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* --- Border Radius --------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 9px; --radius-md: 13px; --radius-lg: 18px; --radius-xl: 24px; --radius-full: 999px; /* --- Spacing scale (rem) ---------------------------------------------------- Nombres cortos, mismo criterio que --radius-*. Los valores calcan los px sueltos que ya usaban los componentes (16/20/24px...) — no es una escala inventada, es la que ya estaba implícita en el CSS, puesta en rem y nombrada para poder reutilizarla (ver dashboard-home.css, primer consumidor). */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.25rem; /* 20px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 2.5rem; /* 40px */ --space-3xl: 3rem; /* 48px */ /* --- Type scale (rem) ------------------------------------------------------- Solo para consumo NUEVO (dashboard-home.css) — no se ha aplicado retroactivamente a .stat-card/.donut-chart-hole/etc. porque esas clases son compartidas con otras pantallas (Resumen de Trabajadores/Máquinas, Documentación...) y cambiar su tamaño de fuente aquí las cambiaría a todas; ver dashboard-home.css para el criterio de scope. */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.75rem; /* 28px */ /* --- Shadows --------------------------------------------------------------- */ --shadow-soft: 0 8px 20px rgba(7, 20, 38, .04); --shadow-panel: 0 18px 52px rgba(7, 20, 38, .06); --shadow-sheet: 0 -24px 70px rgba(7, 20, 38, .20); /* --- Spacing --------------------------------------------------------------- */ --sidebar-width: 270px; --topbar-height: 62px; } /* --- Dark theme ------------------------------------------------------------ Se activa poniendo data-theme="dark" en (ver app.js, initTheme()/ setTheme()). Redefine los mismos tokens que :root — cualquier componente que ya use var(--color-*) recibe el tema oscuro automáticamente. */ :root[data-theme="dark"] { --color-bg: #0f1115; --color-surface: #171a21; --color-surface-strong: #1d212a; --color-sidebar: #13161c; --color-border: #2a2f3a; --color-border-soft: #232730; --color-primary: #5b9bff; --color-primary-soft: #7fb0ff; --color-accent: #e8b84b; --color-accent-soft: #3a2f12; --color-success: #4ade80; --color-success-bg: #14251b; --color-success-border: #1f4430; --color-danger: #f87171; --color-danger-bg: #2a1616; --color-danger-border: #4a2020; --color-warning: #e8b84b; --color-warning-bg: #2c2410; --color-warning-border: #4a3d18; --color-text: #e8eaed; --color-muted: #9aa3b2; --color-text-muted: var(--color-muted); --color-text-secondary: #b0b8c4; --color-bg-subtle: #1a1d24; }