/* ========================================================================= SGI TELEMETRIA LINKHUB - Design tokens Paleta basada en el logo (naranja + rojo coral) Soporta tema claro y oscuro vía [data-theme="light|dark"] en ========================================================================= */ /* ---------- TEMA CLARO (default) ---------- */ :root, :root[data-theme="light"] { /* Marca */ --brand-red: #E11D48; --brand-orange: #F97316; --brand-gradient: linear-gradient(135deg, #E11D48 0%, #F97316 100%); /* Escala naranja (primary) */ --orange-50: #FFF7ED; --orange-100: #FFEDD5; --orange-200: #FED7AA; --orange-300: #FDBA74; --orange-400: #FB923C; --orange-500: #F97316; --orange-600: #EA580C; --orange-700: #C2410C; --orange-800: #9A3412; --orange-900: #7C2D12; /* Semánticos */ --success-50: #ECFDF5; --success-100: #D1FAE5; --success-500: #10B981; --success-600: #059669; --success-700: #047857; --warning-50: #FFFBEB; --warning-100: #FEF3C7; --warning-500: #F59E0B; --warning-600: #D97706; --warning-700: #B45309; --danger-50: #FEF2F2; --danger-100: #FEE2E2; --danger-500: #EF4444; --danger-600: #DC2626; --danger-700: #B91C1C; --info-50: #EFF6FF; --info-100: #DBEAFE; --info-500: #3B82F6; --info-600: #2563EB; --info-700: #1D4ED8; /* Superficies (light) */ --bg-page: #FAFAFA; --bg-surface: #FFFFFF; --bg-subtle: #F3F4F6; --bg-hover: #F9FAFB; /* Sidebar en tema claro: naranja intenso (branding fuerte) */ --sidebar-bg: var(--orange-500); --sidebar-text: rgba(255, 255, 255, 0.85); --sidebar-text-hover: #FFFFFF; --sidebar-item-active-bg: rgba(0, 0, 0, 0.18); --sidebar-item-active-text: #FFFFFF; --sidebar-item-active-border: transparent; --sidebar-section-label: rgba(255, 255, 255, 0.55); --sidebar-divider: rgba(255, 255, 255, 0.15); /* Bordes */ --border: #E5E7EB; --border-strong: #D1D5DB; --border-focus: var(--orange-500); /* Texto */ --text-primary: #111827; --text-secondary: #6B7280; --text-muted: #9CA3AF; --text-inverse: #FFFFFF; /* Estados de proyecto (usados en badges del dashboard) */ --status-stable-bg: var(--success-100); --status-stable-text: var(--success-700); --status-risk-bg: var(--warning-100); --status-risk-text: var(--warning-700); --status-critical-bg: var(--danger-100); --status-critical-text: var(--danger-700); --status-maintenance-bg: #E0E7FF; --status-maintenance-text: #4338CA; /* Elevación */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-focus: 0 0 0 3px rgba(249, 115, 22, 0.35); /* Radios */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* Tipografía */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Espaciado (consistente) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Layout */ --sidebar-width: 240px; --header-height: 64px; } /* ---------- TEMA OSCURO ---------- */ :root[data-theme="dark"] { /* Superficies (dark) */ --bg-page: #0F0F10; --bg-surface: #18181B; --bg-subtle: #27272A; --bg-hover: #1F1F23; /* Sidebar en tema oscuro: patrón A (fondo oscuro + acento naranja translúcido) */ --sidebar-bg: #18181B; --sidebar-text: #A1A1AA; --sidebar-text-hover: #FAFAFA; --sidebar-item-active-bg: rgba(249, 115, 22, 0.15); --sidebar-item-active-text: #FDBA74; --sidebar-item-active-border: var(--orange-500); --sidebar-section-label: #71717A; --sidebar-divider: #27272A; /* Bordes */ --border: #27272A; --border-strong: #3F3F46; --border-focus: var(--orange-500); /* Texto */ --text-primary: #FAFAFA; --text-secondary: #A1A1AA; --text-muted: #71717A; --text-inverse: #18181B; /* Semánticos oscurecidos para dark mode (mayor contraste) */ --success-100: #064E3B; --success-500: #34D399; --success-700: #A7F3D0; --warning-100: #451A03; --warning-500: #FBBF24; --warning-700: #FDE68A; --danger-100: #450A0A; --danger-500: #F87171; --danger-700: #FECACA; --info-100: #172554; --info-500: #60A5FA; --info-700: #BFDBFE; /* Estados en dark */ --status-stable-bg: rgba(16, 185, 129, 0.15); --status-stable-text: #6EE7B7; --status-risk-bg: rgba(245, 158, 11, 0.15); --status-risk-text: #FCD34D; --status-critical-bg: rgba(239, 68, 68, 0.15); --status-critical-text: #FCA5A5; --status-maintenance-bg: rgba(99, 102, 241, 0.15); --status-maintenance-text: #A5B4FC; /* Elevación (más sutil en dark) */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-focus: 0 0 0 3px rgba(249, 115, 22, 0.4); } /* ---------- SEGUIMIENTO DEL SISTEMA (opcional, para futuros usuarios sin preferencia guardada) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } /* Evita flash de tema incorrecto durante carga */ html { color-scheme: light dark; } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; }